title: Semantic UI for React
body: <p>I have an issue with styling React Components with semantic Ui for React (<a href="http://react.semantic-ui.com/" rel="nofollow noreferrer">http://react.semantic-ui.com/</a>). 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.</p>
  
  <p>And I really want to use BEM methodology CSS naming convention while defining class names.</p>
  
  <p>Short example, I have <code>&lt;Menu /&gt;</code> Component and I want to change a background of it, so I will add a class <code>&lt;Menu className="menu-header"&gt;</code>, .menu-header class has different background-color property.</p>
  
  <p>And the point is, that I cannot modify it without <code>!important</code>, 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 <code>.menu-header</code> styles are at the bottom of bundle.js - webpack output, lower than semantic UI's. The <code>.menu-header</code> class is being imported directly to my new component which uses <code>&lt;Menu className="menu-header"&gt;</code> example by CSS loader in webpack.</p>
  
  <p>What I can do in this case?</p>
  
  <p>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 <code>!important</code> - I don't like it.</p>
  
  <p>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.</p>