CODEWITHSUNDEEP
reactjstypescriptthemesmaterial-ui
Gerard van der Stelt
Gerard van der Stelt

Reputation: 143

Property 'theme' does not exist when using typescript

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...'.

Upvotes: 9

Views: 32466

Answers (5)

MaxPower
MaxPower

Reputation: 161

this worked for me

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

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

}));

Upvotes: 4

DevLoverUmar
DevLoverUmar

Reputation: 13933

The answer by @Blaine Garrett is very Good but I fixed the error by using

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

as using import { makeStyles } from '@material-ui/core/styles'; was giving me another error.

Upvotes: 3

Blaine Garrett
Blaine Garrett

Reputation: 1366

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.

Upvotes: 46

mjwrazor
mjwrazor

Reputation: 1964

If you are using material-ui V1 then you do not use the @types anymore the types are shipped with the package. Simply point your tsconfig file to it in the "types": "material-ui" and have node_modules in the "typeRoots" section.

Example

"compilerOptions": {
    "typeRoots": [
       "node_modules/@types",
        "node_modules"
    ],
    "types": [
        "node", "jest", "lodash", "react",
        "react-dom", "react-redux", "redux-logger", "material-ui",
        "react-router-dom", "react-router-redux",
        "redux", "binary-type-tree", "redux-form",
        "tedb", "react-tap-event-plugin",
        "react-hot-loader", "material-ui-icons"
    ],
    "outDir": "dist"
},
"include": [
    "src",
    "node_modules/**/*.d.ts",
    "node_modules/@types/**/*.d.ts"
],

This of course will change your project, the project had almost a complete rewrite and I had to rework my project to use V1.

Upvotes: 2

basarat
basarat

Reputation: 276239

<MuiThemeProvider theme={theme}>

The type definition for mui is out of date / incorrect. This wouldn't be a problem if mui was written in TypeScript.

More

Be the change and provide a fix here : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts as a PR.

Prefer TypeScript first packages

e.g. blueprintjs as they do not suffer from such problems. More : https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html

Upvotes: 1

Related Questions