我可以将样式应用于文件中定义的第一个类以外的类吗？答案

【问题标题】：Can I make styles apply to classes other than the first defined in a file?我可以将样式应用于文件中定义的第一个类以外的类吗？
【发布时间】：2018-07-29 05:28:01
【问题描述】：

我继承了一些代码并一直在对其进行操作，但我遇到了一些让我摸不着头脑的东西。

我不确定我遇到的问题是与 react.js 相关还是更普遍地与 CSS / javascript 相关...

在这段代码中，我们使用了 react.js withStyles。

我已经设置了sandbox来演示。

文件中的第一件事，我们定义了一些可以应用于页面元素的样式，例如

const styles = theme => ({
  buttonGroup: {
    width: "250px",
    display: "flex",
    flexWrap: "wrap",
  }, ...

然后，当我们定义一个类时，我们可以通过 const { classes } = this.props 访问这些样式，例如

class MyButtons extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.buttonGroup}>
        {three_buttons.map(e => (
          <Button className={classes.a_button}>{e}</Button>
        ))}

      </div>
    );
  }
}

这一切都很好并且有效。我尝试的是在同一个文件中定义第二个类，然后我从第一个类中调用它（在组件中创建组件）。

但是，const { classes } = this.props 似乎无法让我访问顶部定义的样式，当我尝试在第二类中设置 className={classes.buttonGroup} 时，我收到错误

TypeError: read property 'buttonGroup' of undefined

我很确定我可以通过像往常一样在单独的文件中定义第二个类来克服这个问题，但我想了解为什么这不起作用。

【问题讨论】：

标签： javascript css reactjs react-with-styles

【解决方案1】：

您没有将样式作为道具传递给 MyOtherButtons 组件，因此您遇到了这个问题。将课程作为道具传递，事情将按预期工作。它适用于 MyButtons 组件，因为您使用 withStyles 语法传递样式。

查看工作链接https://codesandbox.io/s/m3rl6o2qyj

【讨论】：

好的，谢谢！但是，我仍然想知道：为什么我不必在头等舱通过样式？当我创建 MyButtons 对象（在 index.js 上）时，我没有传递任何类。 MyButtons 上的样式定义似乎“自动”适用于 MyButtons，但不适用于 MyOtherButtons？这是为什么呢？
您实际上是使用 withStyles(styles)(MyButtons) 语法将样式传递给 MyButtons。删除它，即使对于 MyButtons 也会停止工作
啊哈！但是，为什么简单地做 export default withStyles(styles)(MyButtons, MyOtherButtons); 不起作用（在原始场景中）？是因为 MyOtherButtons 是从 MyButtons 中调用的，因此在调用之前没有“通过”导出语句？我查了一下，似乎是这样。 codesandbox.io/s/pm1x0q5w7m。非常感谢！