javascript - 我可以将样式应用于文件中第一个定义以外的其他类吗？

我已经继承了一些代码，并且一直在进行操作，但是遇到了一些使我挠头的事情。

我不确定我所遇到的问题是否专门与react.js有关，或更笼统地说与CSS / javascript有关...

在这段代码中，我们将react.js与styles结合使用。

我已经设置了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

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

最佳答案

您没有将样式作为道具传递给MyOtherButtons组件，因此会遇到此问题。通过类作为道具，一切都会按预期进行。它适用于MyButtons组件，因为您正在使用withStyles语法传递样式。

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