Semanti c Ui Переменные и переопределения

Question

Привет всем, я использую React Semanti c Ui Library, и у меня есть вопрос о тематике.

I Я использую коллекцию меню, и я хочу настроить 1 вещь: в semantic-UI/site/collections/menu.variables у меня есть моя переменная @secondaryPointingActiveBorderColor: @black;, и я хочу изменить его цвет, если, но если я сделаю это в этом файле, который будет глобальным для всего меню, и я Вы хотите отредактировать цвет только для одного указанного c меню, чтобы я перешел на файл menu.overrides, но как выбрать переменную с помощью CSS? В своем проекте я использую компонент Semanti c Ui, например:

<Tab  className={styles.tab}  menu={{ secondary: true, pointing: true }} panes={panes} />

На рисунке вы видите компонент React и его эквивалент HTML? Я пробовал с

.tab.ui.pointing.secondary.menu{
    border-color:red;
}

Answer 1

Класс, нацеленный на требуемый элемент в вашем случае, может быть достигнут следующим образом:

.ui.secondary.pointing.menu .active.item {
  border-color: red;
}

Но это влияет на все активные элементы меню, поэтому мы должны иметь свой собственный спецификатор c selecter .

Поэтому я добавлю класс с именем stack-overflow (измените имя cc на ваш вариант использования)

import React from "react";
import { Tab } from "semantic-ui-react";
import "./style.css";

const panes = [
  {
    menuItem: "Tab 1",
    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>
  },
  {
    menuItem: "Tab 2",
    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>
  },
  {
    menuItem: "Tab 3",
    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>
  }
];

const TabExampleSecondaryPointing = () => (
  <Tab
    className="stack-overflow"
    menu={{ secondary: true, pointing: true }}
    panes={panes}
  />
);

export default TabExampleSecondaryPointing;

// style.css
.stack-overflow .ui.secondary.pointing.menu .active.item {
  border-color: red;
}

Вот песочница для демонстрация: Ссылка в песочнице

Answer 2

Селектор был

.ui.secondary.pointing.menu .active.item {
    border-color: red;
}