Semantic UI for React

Question

I have an issue with styling React Components with semantic Ui for React (http://react.semantic-ui.com/). I know I can modify the Semantic UI's styles Core and I did that however sometime I want to put my own styles into their components.

And I really want to use BEM methodology CSS naming convention while defining class names.

Short example, I have <Menu /> Component and I want to change a background of it, so I will add a class <Menu className="menu-header">, .menu-header class has different background-color property.

And the point is, that I cannot modify it without !important, because semantic UI has higher priority (they are grabbing elements more specific, with few classes not just by one like I want to). All styles are being caught by webpack, and my .menu-header styles are at the bottom of bundle.js - webpack output, lower than semantic UI's. The .menu-header class is being imported directly to my new component which uses <Menu className="menu-header"> example by CSS loader in webpack.

What I can do in this case?

My ideas are that I can modify core of semantic ui, change everything out there, but it doesnt solve my problem. Whenever I will want to modify something again, I would have to use !important - I don't like it.

I realized that react inline js styling has the highest priority and it overrides semantic ui styles, but it is a little more complicated than less which I am using an I am not sure whether it would be a good approach in such a big app as the one I want to develop.

Answer 1

I think the use of !important within semantic-ui should be labeled as a bug. I have ran into similar problems and the easiest way to solve it is using inline styles.

You can probably use something like react css modules to help you with that task.

Answer 2

I don't think this is possible. Someone would need to rewrite semantic ui in BEM.

I personally wouldn't use it unless it was in BEM/SASS, I'd assume there are quite a few others as well.