semantic-ui-react 选项卡的默认样式

Question

目前正在实现带有自定义菜单项的选项卡

https://react.semantic-ui.com/modules/tab#custom-menu-items

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

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;

选项卡的大小如何？似乎我对基本样式几乎没有控制，除非我直接进入 css 文件......我可能会自己实现它并停止使用语义 ui

Answer 1

// 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">

然后，正如@ChaseDeAnda 提到的那样：

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

将您的 menu={{color:'green'}} 保留在您的组件中。

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

semantic-ui-react 选项卡的默认样式

default styles for semantic-ui-react tab

reactjs

semantic-ui-react