如何使用类对象在Reactjs中设置功能无状态组件的样式

Question

我想在ReactJs中编写和设置功能无状态组件,如此处所述.

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

问题是我想从这里描述的有状态组件中添加一些样式.

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

问题是,当我尝试做这样的事情时:

<div className={classes.root}>

我收到错误:

'classes'没有定义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 );