For the first time, I am incorporating semantic-ui into my React application. The specific package I am working with can be found here:
To display my header, I am using the following code:
<Menu
className='header'
>
<Container>
I have imported an scss file to style the header as follows:
.header {
background:
linear-gradient(
to left,
rgba(100,97,240,1) 0%,
rgba(255,203,0,1) 100%
)
left
bottom
#FFF
no-repeat;
background-size:100% 4px;
}
The component is being rendered by React like this:
<div class="ui header menu">
<div class="ui container">
....
However, I am facing an issue where the styles defined in the imported SCSS file for .header are not being applied. While I could use !important in my CSS file, it doesn't feel like the right approach with Semantic UI. I would like to know the correct way to resolve this.
With Semantic-UI-React, how can I ensure that the <Menu> element uses the desired styles? Should I make changes in menu.variables or menu.overrides?