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

Question

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

我不确定我遇到的问题是具体涉及 react.js 还是更笼统地涉及 CSS / javascript...

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

我设置了一个sandbox来演示

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

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

然后，当我们定义 class 时，我们可以通过执行 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>
    );
  }
}

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

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

TypeError: read property 'buttonGroup' of undefined

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

Answer 1

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

检查工作linkhttps://codesandbox.io/s/m3rl6o2qyj

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

Can I make styles apply to classes other than the first defined in a file?

javascript

css

reactjs

react-with-styles

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

Can I make styles apply to classes other than the first defined in a file?

javascript

css

reactjs

react-with-styles

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