Как стилизовать функциональный компонент без сохранения состояния в Reactjs с использованием объекта classes

Question

Я хочу написать и стилизовать функциональный компонент без сохранения состояния в ReactJ, как описано здесь .

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

Проблема состоит в том, что я хочу добавить в некоторые стили из Statefulкомпоненты, как описано здесь .

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

Проблема в том, что когда я пытаюсь сделать что-то вроде этого:

<div className={classes.root}>

Я получаю ошибку:

'классы' не определены no-undef

Как мне получить доступ к withStyles classes объекту в стиле root так, как я хочу?

Answer 1

Если я правильно понял, вот как вы можете сделать это с функциональным компонентом.

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