React のセマンティック Ui ( http://react.semantic-ui.com/ )を使用した React コンポーネントのスタイリングに問題があります。セマンティック UI のスタイル コアを変更できることはわかっていますが、それを行いましたが、独自のスタイルをコンポーネントに入れたいと思うことがあります。
そして、クラス名を定義する際に、BEM 方法論の CSS 命名規則を使用したいと思っています。
簡単な例として、<Menu />Component があり、その背景を変更したいので、class を追加します<Menu className="menu-header">。.menu-header クラスには異なる background-color プロパティがあります。
そして要点は、セマンティック UI の優先度が高いため、 なしでは変更できないということ!importantです (私が望むようなクラスだけでなく、いくつかのクラスを使用して、より具体的な要素を取得しています)。すべてのスタイルは webpack によってキャッチされており、私の.menu-headerスタイルは bundle.js の一番下にあります - Webpack の出力で、セマンティック UI よりも低いです。クラスは、webpack の CSS ローダーによる例.menu-headerを使用する新しいコンポーネントに直接インポートされています。<Menu className="menu-header">
この場合、私は何ができますか？
私の考えは、セマンティック ui のコアを変更し、そこにあるすべてを変更できるということですが、それは私の問題を解決しません。何かをもう一度変更したいときはいつでも、使用する必要があります!important-私はそれが好きではありません.
反応インライン js スタイリングが最も優先度が高く、セマンティック ui スタイルをオーバーライドすることに気付きましたが、私が使用しているものよりも少し複雑です。開発したいもの。