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?

Oh, sorry. `material-ui` is in the tags, so issue is not `react-jss`. But still, I don't get the question very well :) Do you want to use `material-ui` with a functional component? I don't know `material-ui` much but have tried it and get the `classes` from the props? — devserkan, Oct 05 '18 at 02:01

score 31 · Accepted Answer · answered Oct 05 '18 at 02:07

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 );

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

1 Answers1