は、コンポーネントを反応させるの反応-CSS-モジュールを使用して

Question

にstyleNameプロパティを追加し、私は自分自身がこのように単純化することができます何かをしようとしているが見つかりました：

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に配置するルールが含まれています。

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を受け取るために期待していたが、これは起こっておらず、 '：

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> 
    ) 
    } 

がうまくいけば、私は十分にユースケースと問題を説明してきました、これを行う方法に関する推奨事項は非常に高く評価されます。

Answer 1

私はそれが親CSSファイル内のセレクタは、子CSSファイルで1を一致させる必要があること

import styles from './index.css' 

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

ノートにstyles小道具を設定することにより、これを行うことが可能だということが分かりました。

さらに詳しい例をご覧ください：https://github.com/gajus/react-css-modules/issues/220#issuecomment-286473757