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中定义，并包含将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)

我希望在some-name（包装）上呈现的内容的第一个元素中收到ChildComponent类中定义的CSS，但这不会发生，＆＃39 ;一些级＆＃39;只是被忽略了。

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

// 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属性中使用此传递的类prop。因此，您的子组件将如下所示：

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的软件包。

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

3 个答案: