Property 'theme' does not exist when using typescript

Question

I am creating a ReactJS starter project using typescript with material-ui v1.x beta.

The themes as explained at: https://material-ui-1dab0.firebaseapp.com/customization/themes/ do not work. Typescript complains about the property 'theme' not existing. I have been fiddling with the index.d.ts in @types/material-ui replacing the interface 'muiTheme' to 'theme' which results in a whole lot of other errors.

When using 'muiTheme' property instead the errors are gone, however only the default colours are used indicating my custom theme is not used at all.

My code:

import * as React from 'react';
import { MuiThemeProvider } from 'material-ui/styles';
import createMuiTheme from 'material-ui/styles/theme';
import createPalette from 'material-ui/styles/palette';
import { teal, bluegrey, red } from 'material-ui/colors';
import Button from 'material-ui/Button';

const theme: any = createMuiTheme({
  palette: createPalette({
    primary: teal, // Purple and green play nicely together.
    accent: {
      ...bluegrey,
      A400: '#00e677',
    },
    error: red,
  }),
});

function Palette() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">
          {'Primary'}
        </Button>
        <Button color="accent">
          {'Accent'}
        </Button>
      </div>
    </MuiThemeProvider>
  );
}

Typescript:

(21,23): error TS2339: Property 'theme' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MuiThemeProvider> & Readonly<{ children?: ReactNod...'.

Answer 1

For anyone running into a similar error message in 2020, my issue was that I was importing makeStyles from the @material-ui/styles package. Switching to the preferred @material-ui/core/styles package gives you the correct types.

eg. Change:

import { makeStyles } from '@material-ui/styles';

to

import { makeStyles } from '@material-ui/core/styles';

See this github issue discussing the preferred import. I believe the former was introduced with MUI 3 as a temporary shim for some style conversions they were working on.

Answer 2

this worked for me

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles((theme: Theme) => ({

}));