Material-ui: Unable to pass classes

[imerkle]

const styleSheetExport = createStyleSheet('OverridesClassNames',{
  root: {
      "flex-flow": "column",
  },
 baseline: {
   "align-items": "baseline"
    ....
}
});

@withStyle(styleSheetExport)
class XListItem extends React.Component{
...
render(){
    const {doBaseline,...others} = this.props;
    return(
      <ListItem className={className(
            [others.classes.baseline]: doBaseline,
            others.className
       )}>
     </ListItem>
    );
}
}

It gives me error like

browser.js:49 Warning: Material-UI: the key `baseline` provided to the classes property object is not implemented in ListItem.
You can only overrides one of the following: root,container,keyboardFocused,default,dense,disabled,divider,gutters,button,.MuiListItem-button-
639905455:hover,.MuiListItem-button-639905455:hover.MuiListItem-disabled-2599742339

How would i add extra stylesheet classes along with overriding some classes ?

[oliviertassinari]

Could you provide a reproduction test case? That would help a lot 👷 .
Something on webpackbin or codesandbot. Thanks!

[oliviertassinari]

I'm closing as we are missing some of the source code to triangle it (there is no occurrence of the classes property).

[hishamkaram]

I have the same issue @oliviertassinari

const styles = theme => ({
    loadingCenter: {
        textAlign: 'center'
    },
})
const LoaderComponent = (props) => {
    const { classes } = props
    return (
        <div className={classes.loadingCenter} >
            <CircularProgress size={50} thickness={5} className={classes.loadingCenter}></CircularProgress>
        </div>
    )
}
export const Loader = withStyles(styles)(LoaderComponent)

[jatazoulja]

I am having issue here as well,

I notice this if I pass <SomeComponent {...props}/>

and I export with redux:

SomeComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};
SomeComponent = connect((store) => {
  return {...store}
})(SomeComponent);

export const Loader = withStyles(styles)(SomeComponent)

[oliviertassinari]

We can't help without a full reproduction example. Codesandbox.io can help building one.

[mgsakata]

Hello. I am having a very similar issue. Passing the props to child components results in the Warning about the key provided is not implemented. I am not certain if I am doing something opposed to Material-UI style overrides or if it is something which legitimately needs fixing?

Warning message from the codesandbox.io example:
Warning: Material-UI: the keybuttonprovided to the classes property is not implemented in ChildComponent. You can only override one of the following: root

As suggested I created a Codesandbox.io example.
https://codesandbox.io/s/rmypz926o4

To avoid the Warning I've found that doing something similar to:
<ChildComponent {...this.props} classes={{}} />
Prevents the error since the classes aren't passed down to the child component.

[oliviertassinari]

@mgsakata It's expected:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';

const styles2 = {
  root: {
    margin: 20
  }
};

let Component2 = () => {
- const { classes } = this.props;
+ const { classes, parentClasses } = this.props;
  return (
    <div className={classes.root}>
-     <h1>Child Component!</h1>
+     <h1 className={parentClasses.button}>Child Component!</h1>
    </div>
  )
}


Component2.propTypes = {
  classes: PropTypes.object.isRequired,
};


Component2 = withStyles(styles2)(Component2);

const styles1 = {
  button: {
    margin: 20
  }
};

let Component1 = function () {
  const { classes } = this.props;
  return (
-   <ChildComponent {...this.props} />
+   <ChildComponent parentClasses={classes} />
  )
}

Component1.propTypes = {
  classes: PropTypes.object.isRequired,
};

Component1 = withStyles(styles1)(Component1)

export default Component1