title: Semantic UI, how to customize menu styles?
body: <p>I'm using semantic-ui for the first time in my React app, the exact package I'm using: <a href="https://react.semantic-ui.com/collections/menu" rel="nofollow noreferrer">https://react.semantic-ui.com/collections/menu</a></p>
  
  <p>I'm rendering my header using  like so:</p>
  
  <pre><code>  &lt;Menu
      className='header'
    &gt;
      &lt;Container&gt;
  </code></pre>
  
  <p>with a scss import to style header like so:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>React is rendering the component like so:</p>
  
  <pre><code>&lt;div class="ui header menu"&gt;
      &lt;div class="ui container"&gt;
         ....
  </code></pre>
  
  <p>The problem is that the .header styles in the import SCSS file are being ignored. While I'm sure I could add <code>!important</code> in my css file that feels like the wrong thing to do with Semantic UI and I'd like to understand the right way.</p>
  
  <p>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?</p>