Material-UI: "The key provided to the classes property is not implemented"

Question

I am using the withStyles() HOC to override some MUI component styles, theme and breakpoints.

There is obviously something I do not understand here as I keep getting errors such as this one:

Warning: Material-UI: the key tab provided to the classes property is not implemented in Items.

You can only override one of the following: card,details,content,cover,avatar,lock

Example code: https://codesandbox.io/s/6xwz50kxn3

I have a <List /> component and its child <Items />.

My intention is to apply the styles in the demo.js file only to the <List /> component, and the styles in the demoChild.js to the <Items /> Component.

I would really appreciate an explanation of what I'm doing wrong, and maybe a solution?

Note: I have found other posts with the same error, but they seem to have something different to my example.

Answer 1

The warnings are caused by this line in your demo.js file:

<Items {...this.props} items={items} /> 

You're spreading all of List's props down into your Items. One of these props is classes, containing all of the CSS classes you define in demo.js. Since those are intended for List, they include CSS classes that are implemented by List but not Items. Since Items is receiving this prop, it's reading it as you trying to override classes that aren't available and warning you about it.

You can fix this problem by spreading only the unused props:

// Use other to capture only the props you're not using in List const { classes, headerIsHidden, ...other } = this.props;  // Then spread only those unused props <Items {...other} items={items} / 

Then, you won't be spreading classes object into Items, so you won't get any warnings about classes that aren't implemented.

Answer 2

In my case, I want to reuse multiple styles in different files, so that I wrote a helper function

import { withStyles } from '@material-ui/core/styles'  // Fixed: material-ui "The key provided to the classes property is not implemented" const withMultipleStyles = (...params) => {     return withStyles((theme) => {         var styles = {}         for (var len = params.length, key = 0; key < len; key++) {             styles = Object.assign(styles, params[key](theme));         }          return styles     }) }  export default withMultipleStyles 

Usage:

import React from 'react' import compose from 'recompose/compose' import { connect } from 'react-redux' import { style1, style2, withMultipleStyles } from '../../styles'  class your_class_name_here extends React.Component {      // your implement }  export default compose(     withMultipleStyles(style1, style2),     withWidth(),     connect(mapStateToProps, mapDispatchToProps) )(your_class_name_here)