Семантический интерфейс, как настроить стили меню?

Я впервые использую semantic-ui в своем приложении React, точный пакет, который я использую: https://react.semantic-ui.com/collections/menu

Я визуализирую свой заголовок следующим образом:

  <Menu
    className='header'
  >
    <Container>

с импортом scss в стиль заголовка, например:

.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 отрисовывает компонент так:

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

Проблема в том, что стили .header в импортируемом файле SCSS игнорируются. Хотя я уверен, что мог бы добавить !important в свой файл css, который кажется неправильным в отношении семантического пользовательского интерфейса, и я хотел бы понять правильный путь.

Как с помощью Semantic-UI-React использовать желаемые стили? Мне нужно добавить некоторые menu.variables или menu.overrides и т. Д.?