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

Question

当在项目中使用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中定义的，它包含在ParentComponent中定位ChildComponent的规则。

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，但这并没有发生，‘某些类’被忽略了。

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

// in ParentComponent do this instead

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

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

Answer 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

Answer 2

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

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

在输出中，它将被组合成clas属性，如`class=“class -name__uuid some`class=- css -clas__uuid”。非常容易编写，并且非常灵活。我希望这对你有帮助

Answer 3

如果你来自谷歌，想知道什么是styleName，请参阅：react-css-modules。它是一个使用css模块和限定范围的css的包。