使用 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 class some-name 在 ParentComponent.css 中定义并包含将 ChildComponent 定位在 ParentComponent.[=23 中的规则=]

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 class 中定义的 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>
    )
  }

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

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 道具。因此，您的子组件将如下所示：

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"。非常容易编写并且非常灵活。希望对你有帮助

Answer 3

如果您来自 google 并且想知道 styleName 是什么，请参阅：react-css-modules。它是一个使用 css 模块和范围 css.

的包