语义 UI 变量和覆盖答案

【问题标题】：Semantic Ui Variables and Overrides语义 UI 变量和覆盖
【发布时间】：2020-07-07 01:56:35
【问题描述】：

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

我正在使用菜单集合，我想自定义 1 件事：在semantic-UI/site/collections/menu.variables 我有我的变量@secondaryPointingActiveBorderColor: @black; 如果我想改变他的颜色，但是如果我在这个文件中这样做，这将对所有菜单都是全局的，我想只为一个特定的菜单编辑颜色，所以我移动了我的menu.overrides 文件但是我该如何选择我的 CSS 变量？在我的项目中，我正在使用这样的语义 Ui 组件：

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

在图片中，你可以看到 React 组件和他的 HTML 等价物吗？我试过了

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

【问题讨论】：

在线演示究竟是什么意思？
类似codesandbox.io/s 的东西可以重现您面临的问题
我没有遇到这个问题，我只是在寻找好的 CSS 选择器
你能发送那个元素的“检查元素”吗？
@Knick 我刚刚编辑并添加了检查元素的捕获

标签： html css reactjs less semantic-ui

【解决方案1】：

选择器是

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

【讨论】：

【解决方案2】：

在您的案例中定位所需元素的类可以通过以下方式实现：

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

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

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

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

【讨论】：