React的語義界面

我在React（http://react.semantic-ui.com/）中使用語義Ui設計React組件的問題。我知道我可以修改Semantic UI的樣式Core，但是我做了這些，但有時我想將自己的樣式放入其組件中。React的語義界面

我真的想在定義類名時使用BEM方法的CSS命名約定。

簡單的例子，我有組件，我想改變它的背景，所以我將添加一個類，.menu-header類具有不同的背景顏色屬性。因爲語義UI具有更高的優先級（它們是更具體的抓取元素，只有很少的類不只是像我想的那樣），所以我不能修改它！重要的是，語義UI具有更高的優先級。所有樣式都被webpack捕獲，並且我的.menu頭樣式位於bundle.js - webpack輸出的底部，低於語義UI。 .menu-header類將直接導入到我的新組件中，該組件使用webpack中的CSS加載程序實例。

我能在這種情況下做什麼？

我的想法是，我可以修改語義ui的核心，改變一切，但它不能解決我的問題。每當我想再次修改某些內容時，我都必須使用！重要的 - 我不喜歡它。

我意識到反應內聯js樣式具有最高的優先級，它覆蓋了語義UI風格，但它比我使用的稍微複雜一些，我不確定這是否是一個好的方法我想要開發的大型應用程序。

任何人都可以幫助我嗎？

問候

來源

2016-12-28 user4821826

我認爲語義的UI內使用!important應該被標記爲錯誤。我遇到了類似的問題，並且最簡單的方法是使用內聯樣式。

你可以使用類似react css modules的東西來幫助你完成這項任務。

來源

2016-12-28 19:03:23 vcanales

我不認爲這是可能的。有人需要在BEM中重寫語義ui。

我個人不會使用它，除非它是在BEM/SASS中，我認爲還有其他幾個。

來源

2018-01-09 22:10:59 Kelsey

歡迎來到StackOverflow - 這個答案更適合作爲評論，它具有更多的聲譽，你將能夠發佈。在此之前嘗試提出可爲社區增加價值的全面解答。 – RyPope

React的語義界面

回答

相關問題