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

【问题标题】：How to style a functional stateless component in Reactjs using classes object如何使用类对象在 Reactjs 中设置功能性无状态组件的样式
【发布时间】：2019-03-10 10:41:36
【问题描述】：

我想写a functional stateless component in ReactJs as described here的样式。

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

问题是我想添加一些styles from stateful components as described here。

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

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

<div className={classes.root}>

我得到错误：

'classes' 未定义 no-undef

如何访问 withStyles classes 对象以按照我想要的方式设置 root？

【问题讨论】：

你想在这里使用react-jss库吗？
哦，对不起。 material-ui 在标签中，所以问题不是react-jss。但是，我还是不太明白这个问题 :) 你想将material-ui 与功能组件一起使用吗？我不太了解material-ui，但尝试过并从道具中获取classes？

标签： css reactjs material-ui jsx

【解决方案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 );

【讨论】：