Search code examples
htmlcssreactjslesssemantic-ui

Semantic Ui Variables and Overrides

React/Html Component Inspect Element Hey everyone, I am using the React Semantic Ui Library and I have a question about theming.

I am using a menu collection and I want to custom 1 thing: in semantic-UI/site/collections/menu.variables I have my variable @secondaryPointingActiveBorderColor: @black; and I want to change his color if, but if I do that in this file that will be global for all menu and I want to edit the color just for one specific menu so I moved on my menu.overrides file but how can I select my variable with CSS? In my project I am using the Semantic Ui Component like this :

<Tab  className={styles.tab}  menu={{ secondary: true, pointing: true }} panes={panes} />

In the picture, you can see the React Component and his HTML equivalent? I tried with 

.tab.ui.pointing.secondary.menu{
    border-color:red;
}
Solution

  • The selector was 

    .ui.secondary.pointing.menu .active.item {
    border-color: red;
}