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

Question

我继承了一些代码并且一直在操纵它，但我遇到了一些让我挠头的事情。

我不确定我遇到的问题是专门与 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

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

Answer 1

您没有将样式作为 Prop 传递给 MyOtherButtons 组件，因此您遇到了这个问题。通过类(class)作为 Prop ，一切都会按预期进行。它适用于 MyButtons 组件，因为您使用 withStyles 语法传递样式。

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