How to style a functional stateless component in Reactjs using classes object

Question

I want to write and style a functional stateless component in ReactJs as described here.

const MyBlueButton = props => {
  const styles = { background: 'blue', color: 'white' };  
  return <button {...props} style={styles} />;
};

The problem is that I want to add in some styles from stateful components as described here.

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
});

The problem is that when I try to do something like this:

<div className={classes.root}>

I get the error:

'classes' is not defined no-undef

How do I access the withStyles classes object to style root the way I want?

Answer 1

If I understood right here is how you can do this with a functional component.

const styles = theme => ( {
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
} );

const App = ( props ) => {
  const { classes } = props;
  return <div className={classes.root}>Foo</div>;
};

export default withStyles( styles )( App );