SassとCSSモジュールでグローバルな親セレクタを使用

GLASSAL親セレクタ（この場合はisOpen）の存在に基づいて、SassモジュールとCSSモジュールを使用してReactコンポーネントのスタイルを設定するにはどうすればよいですか？SassとCSSモジュールでグローバルな親セレクタを使用

レンダリングされたHTML：

<div class="isOpen"> 
    <div class="MyContainer__MyStyle___u9dTa"> 
     My react component 
    </div> 
</div>

マイSassのファイル：

.MyStyle 
    margin-left: 100px 
    color: black 

// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like: 
.MyStyle 
    :global(.isOpen) & 
     margin-left: 0 
     color: red

上記のエラー与えるコード

：不動産の "グローバル" が続かなければならない '：'

出典

2016-10-26 per_jansson

あなたのコードは、エラーが発生しますが、出力は異常です。私はよくあなたの質問を理解していない、あなたはこれのようなものが欲しいですか？ http://www.sassmeister.com/gist/e221cca9fdf3ff44c355f128ddc49f3b – blonfu

は、それがどのように見えますここにいくつかの問題があります。

"MyContainer__MyStyle___u9dTa"は1つの大きなクラス名です。ピリオドの構文を使用して、1つの部分を参照することはできません。このような部分的なクラスを参照することができます。

また、あなたはsassの代わりにLESS構文を使用しているようです。ここでは、私は草と部分クラスの参照でコードを書く方法です

*[class=*"MyStyle"]{ 
    margin-left: 100px; 
    color: black; 
} 
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like: 
.isOpen{ 
    *[class=*"MyStyle"]{ 
     margin-left: 0 
     color: red 
    } 
}

幸運。それがあなたにとって簡単な場合には、バージラCSSをサスファイル内で使用できることに注意してください。それは私が答えることのために少し遅れだけどここではCSSとSASS

http://www.w3schools.com/css/css_syntax.asp

http://sass-lang.com/documentation/

出典

2016-10-26 21:19:12