使用 react-css-modules 时在 React 组件上添加 styleName 属性答案

【问题标题】：Add styleName property on React component when using react-css-modules使用 react-css-modules 时在 React 组件上添加 styleName 属性
【发布时间】：2016-12-16 14:12:32
【问题描述】：

在项目中使用react-css-modules 时，我发现自己正在尝试做一些可以简化为的事情：

import React from 'react'
import CSSModules from 'react-css-modules'
import ChildComponent from './ChildComponent.jsx'
import styles from './ParentComponent.css'

class ParentComponent extends React.Component {

  render() {
    return (
      <div>
        <p styleName='parentComponent'>This is rendered in ParentComponent</p>
        <ChildComponent styleName='some-name' /> // this style is not applied
      </div>
    )
  }

}

export default CSSModules(ParentComponent, styles)

CSS 类some-name 在ParentComponent.css 中定义，包含将ChildComponent定位在ParentComponent 内的规则。

ChildComponent 实现如下所示：

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './ChildComponent.css'

class ChildComponent extends React.Component {

  render() {
    return (
      <div> // expected to have this div decorated with 'some-name' class
        <p styleName='childComponent'>This is rendered in ChildComponent</p>
        <button styleName='childComponent'>This is rendered in ChildComponent</button>
      </div>
    )
  }

}

export default CSSModules(ChildComponent, styles)

我希望在ChildComponent（包装）上呈现的第一个元素中收到some-name 类中定义的 CSS，但这并没有发生，“some-class”只是被忽略了。

我可以通过添加额外的包装并对其应用样式来解决此问题，但如果可能的话，我想避免这种情况：

// in ParentComponent do this instead

render() {
    return (
      <div>
        <p styleName='parentComponent'>This is rendered in ParentComponent</p>
        <div styleName='some-name'>
          <ChildComponent />
        </div>
      </div>
    )
  }

希望我已经很好地解释了用例和问题，所以任何关于如何做到这一点的建议将不胜感激。

【问题讨论】：

我有同样的用例。在github.com/gajus/react-css-modules#loops-and-child-components 中应用最低代码块也无济于事。包装 ChildComponent 不应该是要走的路。如何解决？

标签： react-css-modules

【解决方案1】：

我发现可以通过在

上设置 styles 属性来做到这一点

import styles from './index.css'

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent styles={styles}>The title</ChildComponent>
      </div>
    )
  }
}

注意，父 css 文件中的选择器需要与子 css 文件中的选择器匹配。

在此处查看更详细的示例：https://github.com/gajus/react-css-modules/issues/220#issuecomment-286473757

【讨论】：

我想我终于让它工作了，虽然我没有在这里回答我自己的问题（我太糟糕了）。正如您在 github 问题中提到的那样，文档中也进行了解释.. 尽管在阅读 10 次之前我也发现它有点难以理解（github.com/gajus/react-css-modules#loops-and-child-components）。不过感谢您的提醒！

【解决方案2】：

有一个非常简单的解决方案。您需要在 styleName 中定义，但在此组件内部，您需要在 className 属性中使用此传递的类道具。因此，您的子组件将如下所示：

class ChildComponent extends React.Component {
  render() {
    return (
      <div className={this.props.className} styleName="some-internal-css-clas">
      </div>
    )
  }
}

并且在输出中它将被组合 css class attr 像 `class="some-name__uuid some-internal-css-clas__uuid"。非常容易编写并且非常灵活。希望对你有帮助

【讨论】：

【解决方案3】：

如果您来自 google，想知道styleName 是什么，请参阅：react-css-modules。这是一个使用 css 模块和作用域 css 的包。

【讨论】：