リアクションのセマンティックUI

Question

リアクションのセマンティックUI（http://react.semantic-ui.com/）でリアクションコンポーネントをスタイリングする際に問題があります。私はセマンティックUIのスタイルを変更することができますコアと私はいつか私は自分のスタイルを自分のコンポーネントに入れたいと思いました。

そして、クラス名を定義する際に、BEM方法論のCSS命名規則を使用したいと思っています。

私はコンポーネントを持っており、その背景を変更したいので、クラスを追加します.menu-headerクラスは異なる背景色プロパティを持っています。

重要なのは、セマンティックUIの方が優先度が高い（私が欲しいだけでなく、いくつかのクラスを特定しているため）、重要でないと変更できないということです。すべてのスタイルはwebpackによって捕捉され、私の.menu-headerスタイルはbundle.jsの最後にあります - webpackの出力で、意味的UIよりも低いです。 .menu-headerクラスは、webpackのCSSローダーの例を使用する新しいコンポーネントに直接インポートされています。

この場合、私は何ができますか？

私の考えは、意味論のコアを変更して、そこにあるものすべてを変更することができますが、それは私の問題を解決しません。もう一度何かを修正したいときはいつも、私はそれを使わなければならない！重要 - 私はそれが気に入らない。

リアクション・インライン・スタイル・スタッキングは最も優先順位が高く、セマンティック・スタイルをオーバーライドしていますが、これは私が使用しているものより少し複雑です。そのような私が開発したい大きなアプリ。

誰でも手伝ってもらえますか？

よろしく

Answer 1

私はセマンティック-UI内!importantの使用はバグとしてラベル付けされるべきだと思います。私は同様の問題に遭遇し、最も簡単な方法は、インラインスタイルを使用して解決するためのです。

おそらくreact css modulesのようなものを使用して、その作業を手助けすることができます。

Answer 2

私はこれが可能ではないと思います。誰かがBEMでセマンティックUIを書き直す必要があります。

私がBEM/SASSにいない限り、個人的には使用しませんでしたが、他にもかなりの数があると思います。