Семантический пользовательский интерфейс настроить цвет фона ui.menu - PullRequest
Новая
       19

Семантический пользовательский интерфейс настроить цвет фона ui.menu

0 голосов
/ 26 июня 2018

Я пытаюсь настроить семантический интерфейс, используя его тематическую функцию.

Я использую семантическую реакцию.

Я определил переопределение css моего меню в /semantic/src/site/collections/menu.overrides следующим образом: 

.ui.menu.item {
  color: fade(#eb6510, 80%); !important;
  background: black !important;
}

Компонент My Menu прост: 

<Menu>
  <Menu.Item as={NavLink} exact to="/" name="logo" activeclassname="active"/>
  <Menu.Item as={NavLink} exact to="/menu"  name="Menu" activeclassname="active"/>
    <Menu.Menu position="right">
      <Menu.Item as={NavLink} exact to="/login" name="Log in" activeclassname="active"/>
      <Menu.Item as={NavLink} exact to="/register" name="Sign up" activeclassname="active"/>
   </Menu.Menu>
</Menu>

, но он по-прежнему отображается как тема по умолчанию: enter image description here

Вот скриншот проверки элемента: enter image description here

Что я делаю не так?

Мне, вероятно, нужно определить больше специфичности для active класса и right класса, но не следует ли отображать элемент 'logo' в соответствии с моим меньшим кодом?

Я все еще могу изменитьПеременные menu.variable для изменения цвета фона (например, @itemBackground: fade(#eb6510, 80%);), но я действительно хочу использовать чистый CSS для переопределения CSS по умолчанию на случай, если в будущем я хочу перейти из Semantic UI.

1 Ответ

0 голосов
/ 11 июля 2018

Если вы изменяете содержимое внутри переменных и переопределений темы semantic-ui, вам нужно создавать новые стили.Простое изменение переопределений не сделает этого.Прямо сейчас semantic-ui-react является агностиком для css.Он просто отображает разметку и необходимые классы.Если вы установили semantic-ui и semantic-ui-react в своем проекте, вам нужно будет запустить некоторые из сценариев gulp в инструментах сборки.Посмотрите здесь: https://semantic -ui.com / вводная / build-tools.html # gulp-команды

...