1

サードパーティの反応コンポーネントを使用していますが、sass を正しく設定できません。このコンポーネントは一連の<li>html タグを作成し、そのうちの 1 つ<li>がクリックされると、その項目に「アクティブな」クラス名を追加します: <li class="active">. そのアクティブな <li>要素の css をカスタマイズしたいと思います。これを行うために、次の内容を含む 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 がこの Sass ファイルをロードするときに、各ローカル .sass ファイルの各クラス名を次の形式に変換するcss-loaderを使用することです: "localIdentName=[name]_[local]__[hash:base64:5] "。つまり、私の CSS はもはや a に適用されません<li class="active">。代わりに、 で機能するようになりました<li classname="Test__active___2LBGS">。これまでに2つの（悪い）解決策を考えました：

  1. localIdentName を使用して特定の css クラス名の名前を変更しないように、どうにかして webpack を再構成します
  2. どういうわけか<ReactTags />クラス名を使用するようになりました: Test__active___2LBGS

これらのどちらも実現可能とは思えないので、かなり行き詰まっています!! どんな助けでも大歓迎です。

4

2 に答える 2

1

Local スコープの下のcss-loader のドキュメントに記載されているように、ローダーに変換させたくないスタイルに :global を適用できます。

:global (.tag_input li.active) {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}
于 2016-07-26T16:45:39.390 に答える
0

className プロップを使用し、プロップを更新するアクティブな状態を設定する必要があります

<ReactTags className={props.active ? classes.tagInputActive : classes.tagInput}/>
于 2016-07-26T16:48:00.800 に答える