语义 Ui 变量和覆盖

Question

大家好，我正在使用 React Semantic Ui 库，我有一个关于主题的问题。

我正在使用菜单集合，我想自定义 1 个东西：在 semantic-UI/site/collections/menu.variables 我有我的变量 @secondaryPointingActiveBorderColor: @black; 如果我想更改他的颜色，但是如果我在这个文件中这样做，它将对所有菜单都是全局的，我想只为一个特定的菜单编辑颜色，所以我移动了我的 menu.overrides 文件，但是如何才能我 select 我的变量与 CSS？在我的项目中，我使用这样的语义 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;
}

Answer 2

class 可以通过以下方式实现在您的情况下定位所需元素：

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

但这会影响所有菜单活动项，因此我们需要有自己的特定选择器。

所以我将添加一个名为 stack-overflow 的 class（根据您的用例更改名称）

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

这里有一个沙盒用于演示：Sandbox link

语义 Ui 变量和覆盖

Semantic Ui Variables and Overrides

html

css

less

reactjs

semantic-ui