Comment styliser un composant sans état fonctionnel dans Reactjs à l'aide de l'objet classes

Question

Je veux écrire et styliser n composant fonctionnel sans état dans ReactJs comme décrit ici .

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

Le problème est que je veux ajouter quelques styles de composants avec état comme décrit ici .

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

Le problème est que lorsque j'essaie de faire quelque chose comme ça:

<div className={classes.root}>

Je reçois l'erreur:

'classes' n'est pas défini no-undef

Comment accéder à l'objet withStylesclasses pour styliser root comme je le souhaite?

Answer 1

Si j'ai bien compris, voici comment vous pouvez le faire avec un composant fonctionnel.

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