React + Sass + Webpackローカルスタイリングの問題

Question

私は3rd party react componentを使ってaを使用しています。このコンポーネントは一連の<li> htmlタグを作成し、<li>の1つがクリックされた場合、そのアイテムには「アクティブ」クラス名：<li class="active">が追加されます。私はそれのためのCSSをカスタマイズしたいと思いますアクティブ<li>要素。これを行うには、私は以下を含むTest.scssファイルを作成：

.tag_input li.active { 
    font-weight: bold; 
    text-decoration: underline; 
    color: red; 
} 

このスタイルを使用するには、私は次のように

import classes from './Test.scss' 
export const Test = (props) => { 
    return (
    <ReactTags 
     classNames={{ 
      tags: classes.tag_input, 
     }} 
    ... 
    > 
) 
} 

反応しない問題は、WebPACKのはこのサスファイルをロードするときということですcss-loaderを使用します。これは、各ローカル.sassファイルの各クラス名を "localIdentName = [name] _ [local] __ [hash：base64：5]"の形式に変換します。つまり、私のCSSはもう<li class="active">には当てはまりません。代わりに<li classname="Test__active___2LBGS">で動作します。私は、これまでに2つ（悪い）ソリューションを考えてきました：

1. localIdentName
に
2. を使用して、特定のCSSクラス名を変更しないように、私は何とか再構成のWebPACK私は何とか​​は、クラス名を使用して取得：Test__active___2LBGS

これらのどちらも実現可能ではないので、私はかなり詰まっています！どんな助けも大歓迎です。

:global (.tag_input li.active) { 
    font-weight: bold; 
    text-decoration: underline; 
    color: red; 
} 

Answer 1

あなたが小道具を更新するアクティブな状態

Answer 2

あなたはクラス名の小道具を使用する必要がありますし、設定するために：あなたは、ローダは変換しないことを、スタイルにグローバル：あなたは適用することができますcss-loader documentation下のローカルスコープで述べたように