Semantic UI, how to customize menu styles?

Question

I'm using semantic-ui for the first time in my React app, the exact package I'm using: https://react.semantic-ui.com/collections/menu

I'm rendering my header using like so:

  <Menu
    className='header'
  >
    <Container>

with a scss import to style header like so:

.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;
}

React is rendering the component like so:

<div class="ui header menu">
    <div class="ui container">
       ....

The problem is that the .header styles in the import SCSS file are being ignored. While I'm sure I could add !important in my css file that feels like the wrong thing to do with Semantic UI and I'd like to understand the right way.

With Semantic-UI-React, how to I make the use the desired styles? Do I need to add some menu.variables or menu.overrides etc?

Answer 1

I am not sure if you can customize css using className. You can use style prop for custom css. You can use this guide for customizing default styles: React Semantic-UI customized

Additionally if you encountered any issue generating semantic.min.css file you can refer this issue:gulp build is not building semantic.min.css