Having trouble styling React Components with Semantic UI for React (). I've customized Semantic UI's styles Core, but sometimes I need to incorporate my own styles into their components.
I prefer using the BEM methodology for CSS naming conventions when defining class names.
For example, if I have a <Menu /> Component and want to change its background, I would add a class
<Menu className="menu-header">The issue arises because I can't modify it without using !important due to Semantic UI having higher priority. Their styles are more specific, utilizing multiple classes instead of just one like I intend to do. All styles are captured by webpack, and my .menu-header styles end up at the bottom of bundle.js - webpack output, below Semantic UI's. The .menu-header class is imported directly to my new component which uses
<Menu className="menu-header">What can I do in this situation?
Some solutions I'm considering include modifying the core of Semantic UI entirely, but that doesn't fully resolve my issue. Every time I need to make a modification, I'd have to resort to using !important, which isn't ideal.
I've realized that inline JS styling in React holds the highest priority and can override Semantic UI styles. However, it's a bit more complex than what I currently use and may not be the best approach for a large application like the one I aim to develop.