Typescript Material UI Property 'classes' is missing in type for MUI component

Question

Long story short, typescript complains the missing property classes on every material-ui component. In other words, Typescript forces the classes property to be existed in almost every material-ui components. Here is error message during webpack compiling using ts-loader,

I have following codes,

Header.tsx

import AppBar from 'material-ui/AppBar';
import * as React from 'react';
import { withStyles } from 'material-ui/styles/index';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';

const decorate = withStyles((theme) => ({
  header: {
    paddingTop: theme.spacing.unit,
    width: '100%',
  },
}));

const AppBarTypographyStyle = {
  color: 'white',
  fontSize: '1.6rem',
};

const Header = decorate(({classes}) => (
  <header>
    <AppBar position="static" classes={{root: classes.header}}>
      <Toolbar>
        <Typography style={AppBarTypographyStyle} classes={{}} color="inherit" type="title">
            OLIVE
        </Typography>
      </Toolbar>
    </AppBar>
  </header>
));

export default Header;

And I have error for Toolbar with following messages

TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ToolbarProps & { children?: ReactNode; }'.
  Type '{ children: Element; }' is not assignable to type 'ToolbarProps'.
    Property 'classes' is missing in type '{ children: Element; }'

For AppBar and Typography I don't receive error as i added classes property with my styles defined in the function decorator and an empty object; However it is not possible to JUST USE style & className properties

<AppBar position="static" style={exampleStyleObj} className={exampleClass} >

I follows the styling approach using withStyle decorator from material-ui doc

CSS IN JS & Over
https://material-ui-next.com/customization/css-in-js/

Overrides
https://material-ui-next.com/customization/overrides/

Typescript Material-UI guides
https://material-ui-next.com/guides/typescript/

I am using, [email protected] [email protected]

I have checked if there are same issues and answer elsewhere and even checked the material-ui source codes and found the following,

/**
 * All standard components exposed by `material-ui` are `StyledComponents` with
 * certain `classes`, on which one can also set a top-level `className` and inline
 * `style`.
 */
export type StandardProps<C, ClassKey extends string, Removals extends keyof C = never> =
  & Omit<C & { classes: any }, 'classes' | Removals>
  & StyledComponentProps<ClassKey>
  & {
    className?: string;
    style?: Partial<React.CSSProperties>;
  }

The StandardProps is what most ComponentProps interface extends from (For example, AppBarProps). However so far i have not much luck for solving these.

Please help!

since you use Typescript, are u using this npmjs.com/package/@types/material-ui ? — Dane
– Dane, Commented Nov 24, 2017 at 6:11
hey mate thanks for help! Unfortunately, @types/material-ui type definitions is for material-ui v0.18.17. Not for the V1 beta. In the V1 beta type definition has been added to the project itself at material-ui@next so no additional @types need to be installed. However i edited my question based on what i found out, have a look! — loala.js
– loala.js, Commented Nov 24, 2017 at 6:33
@Ioala your example seems to work fine for me with [email protected] and [email protected]. What's more it should not be necessary as you say to provide an empty classes prop to any Material UI component... that was the case with some older versions of the typings, but not any more. Are you sure you're using the latest version? — Tom Crockett
– Tom Crockett, Commented Nov 24, 2017 at 17:45
@TomCrockett Hey man, it worked. I just upgraded my typescript from [email protected] to [email protected] and it successfully compile. However i would like to hold this question a bit longer just in case similar error appears again down the road. — loala.js
– loala.js, Commented Nov 25, 2017 at 3:01

Benny Neugebauer · Accepted Answer · 2021-03-17 08:08:08Z

5

In TypeScript 4 there is now great support for Material UI's withStyle HOC.

But you have export your component using export default withStyles(styles)(YourComponent) because otherwise TypeScript will still complain with:

TS2741: Property 'classes' is missing in type '{}' but required in type 'Props'.

Here is a template which shows how it can be done using TypeScript 4:

import React from 'react';
import {createStyles, Theme, withStyles, WithStyles} from '@material-ui/core';

const styles = (theme: Theme) =>
  createStyles({
    // ...
  });

interface Props extends WithStyles<typeof styles> {}

const YourComponent: React.FC<Props> = (props: Props): JSX.Element => {
  const {classes} = props;
  return (
    // ...
  );
};

export default withStyles(styles)(YourComponent);

answered Mar 17, 2021 at 8:08

Benny Neugebauer

55.4k31 gold badges250 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

loala.js · Accepted Answer · 2017-11-28 07:57:26Z

0

I would like to answer my question. Thanks to Tom Crockett from material-ui gitter.

Using Typescript 2.4.0 will not work due to the typing difference on material-ui components. However, 2.4.2 patch would fixes the problem.

answered Nov 28, 2017 at 7:57

loala.js

1722 silver badges12 bronze badges

Collectives™ on Stack Overflow

Typescript Material UI Property 'classes' is missing in type for MUI component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related