Reactjs 语义用户界面反应选项卡的默认样式

当前正在使用自定义菜单项实现选项卡

如何设置默认颜色从黑色到灰色的样式？我所知道的是，如果您添加一个颜色设置为绿色的菜单属性，它会将活动颜色更改为绿色，但我希望非活动颜色为灰色，活动颜色为绿色。似乎没有明显的方法来设置默认颜色

import React, { Component } from 'react';
import { Label, Menu, Tab } from 'semantic-ui-react';


const panes = [
    {
      menuItem: <Menu.Item key='location'><i class="marker icon"></i></Menu.Item>,
      render: () => <Tab.Pane>Tab 1 Contents</Tab.Pane>,
    },
    {
      menuItem: <Menu.Item key='messages'><i class="marker icon"></i></Menu.Item>,
      render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>,
    },
  ]

class TabBar extends Component {

    render() {
        return (
            <Tab menu = {{color: 'green'}} panes={panes} />
        );
    }
}

export default TabBar;

import React，{Component}来自'React'；
从“语义ui react”导入{标签、菜单、选项卡}；
常数窗格=[
{
菜单项：，
呈现：（）=>选项卡1内容，
},
{
菜单项：，
呈现：（）=>选项卡2内容，
},
]
类TabBar扩展组件{
render（）{
返回(
);
}
}
导出默认选项卡栏；

标签的大小如何？似乎我对基本样式几乎没有控制权，除非我直接进入css文件。。。我可以自己实现它，停止使用语义ui

// In index.html or wherever you're rendering your React app
// AFTER you load the semantic UI css
<link rel="stylesheet" type="text/css" href="custom.css">

在组件中保留

菜单={{{color:'green'}}

---

这将覆盖语义UI使用的活动类，并在活动时将其设置为绿色。

您必须覆盖

.UI.menu>.item:not（.active）

的CSS，并将其设置为

颜色：灰色

。我必须进入语义UI CSS？您可以发布如何在应用程序中加载CSS吗？@Mitchillie im使用cdnthanks。标签的实际大小如何？我看到在“grid”属性下有一个{paneWidth:12，tabWidth:4}选项。但它似乎没有任何作用，也没有关于TabWidthStyleing只是CSS的文档。要么1。深入研究语义ui源代码或文档，2。打开浏览器控制台，检查要更改的元素，并使用一些不同的值，或3。提出新问题

// In custom.css
.ui.menu > .item:not(.active) {
  color: gray;
}