2

プロジェクトで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に配置されるルールが含まれています。ChildComponentParentComponent

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レンダリングされるものの最初の要素(ラッピング)のクラスで定義された CSS を受け取ることを期待していましたChildComponentが、これは行われず、「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>
    )
  }

うまくいけば、ユースケースと問題を十分に説明したので、これを行う方法に関する推奨事項は大歓迎です.

4

3 に答える 3

0

Google から来て、 が何であるか疑問に思っている場合は、 react-css-modulesstyleNameを参照してください。css モジュールとスコープ付き css を使用するためのパッケージです。

于 2020-09-15T10:04:28.823 に答える