Global theme with TypeScript/React/Material-UI

Question

I'm following the official tutorial to create global theme for my app.

My root component is supposed to provide global theme:

const themeInstance = {
  backgroundColor: 'cadetblue'
}

render (
    <ThemeProvider theme={themeInstance}>
      <ChildComponent />
    </ThemeProvider>,
    rootNode
)

But I can't seem to get my child component to apply the theme:

const useStyles = makeStyles(theme => {
  childComp: {
    backgroundColor: theme.backgroundColor
  }
})

const ChildComponent: FC = () => {
  const classes = useStyles()
  return (
    <div className={classes.childComp}>I'm a div</div>
  )
}

<ChildComponent /> is getting rendered un-styled.

It looks to be a types mismatch issue of some sort as when I started to play around with types of theme parameter, the browser has rendered the expected output (<ChildComponent /> div with background-color: cadetblue) for split second than failed with error.

Any help to figure out where did I go wrong way are quite appreciated.

Live sandbox can be found over here.

NearHuscarl · Accepted Answer · 2021-02-27 08:40:53Z

You need to type your custom theme. By default makeStyle will use default theme type which has the following signature:

export interface Theme {
  shape: Shape;
  breakpoints: Breakpoints;
  direction: Direction;
  mixins: Mixins;
  components?: Components;
  palette: Palette;
  shadows: Shadows;
  spacing: Spacing;
  transitions: Transitions;
  typography: Typography;
  zIndex: ZIndex;
  unstable_strictMode?: boolean;
}

As you can see, it doesn't have backgroundColor property. You need to update the Theme definition by using module augmentation to make typescript stop complaining about the incorrect theme type.

import { Theme } from "@material-ui/core/styles/createMuiTheme";
import { createMuiTheme } from "@material-ui/core/styles";

declare module "@material-ui/styles" {
  interface DefaultTheme extends MyTheme {}
}

declare module "@material-ui/core/styles/createMuiTheme" {
  interface ThemeOptions extends MyTheme {}
}

export interface MyTheme extends Theme {
  backgroundColor: string;
}

const theme = createMuiTheme({
  backgroundColor: "red"
});

export { theme };

In your component

const useStyles = makeStyles((theme) => ({
  childComp: {
    backgroundColor: theme.backgroundColor
  }
}));

Live Demo

SILENT · Accepted Answer · 2020-10-10 14:08:33Z

1

This happens to me often. Try the following:

const useStyles = makeStyles(theme => ({
  childComp: {
    backgroundColor: theme.backgroundColor
  }
}));

Note the ( )

Live sandbox: https://stackblitz.com/edit/react-ts-e7vw8s?file=childComponent.tsx

answered Oct 10, 2020 at 14:08

SILENT

4,2967 gold badges45 silver badges67 bronze badges

2 Comments

SILENT Over a year ago

@ZChu I believe the correct way is to setup a palette in your global style and access it everywhere else. I'm not sure why backgroundColor is not accessible via the default Theme type but you could just (theme: any) to get around it until you eventually setup the palette.

SILENT Over a year ago

@ZChu Ahh, I noticed you did make a custom global theme. You should follow material-ui.com/customization/theming

Collectives™ on Stack Overflow

Global theme with TypeScript/React/Material-UI

2 Answers 2

Live Demo

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Live Demo

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related