Material ui 如何更改物料界面中的活动选项卡颜色？

如何更改活动选项卡的颜色

我的意思是，这条粉红色的线，看看图片

---

您可以制作一个粉红色的div，该div使用JQuery的JavaScript制作动画。它将被保存在与标签颜色相同的绿色div中。

嗯，您有两个选项：

您可以自定义主题：

但最简单的方法是使用

inkBarStyle

属性。
您可以在..
例如：

。。。

虽然这是一个相当老的问题，但它仍然会引起一些注意，对于我们这些使用多个和大量定制主题的人来说，这是一个麻烦。我有一个更好的解决方案，可以让你根据主题定制不同的颜色

首先，通过将类以这种方式添加到Tabs组件，创建一个可以钩住的类

<Tabs
   onChange={this.handleChange}
   value={this.state.slideIndex}
   className="dashboard-tabs"> //this is what you need
       <Tab label="Main" value={0}/>
       <Tab label="Analytics" value={1}/>
       <Tab label="Live Widgets" value={2}/>
</Tabs>

别担心天气！重要的。使用的tabboo！重要是坏的，只是一个大禁忌。你会没事的

这是一个SCSS样本

.dashboard-tabs{
    > div{
        background-color: $bg-color-meddark !important;
        &:nth-child(2){
            > div{
                background-color: $brand-info !important;
            }
        }
    }
}

如果使用多个主题，此解决方案将非常有用，因为（假设主题设置正确），应该在代码中的某个位置追加一个动态主题类，将UI从一种颜色更改为另一种颜色。假设你有两个主题。1是浅主题类，使用主题类

浅主题

；2是暗主题类，使用主题类

暗主题

现在，您可以按如下方式执行此操作：

.light-theme .dashboard-tabs > div{
    background-color: #fff !important;
}
.light-theme .dashboard-tabs > div:nth-child(2) > div{
    background-color: #333 !important;
}
.dark-theme .dashboard-tabs > div{
    background-color: #333 !important;
}
.dark-theme .dashboard-tabs > div:nth-child(2) > div{
    background-color: #ddd !important;
}

有道理吗

为什么我反对InkBarStyle解决方案？因为你将用一种背景色替换另一种背景色，但仍然无法跨主题更改它

---

祝大家好运

以下是一个主题模板，可用于您的项目：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

let _colors = require('material-ui/styles/colors');
let _colorManipulator = require('material-ui/utils/colorManipulator');
let _spacing = require('material-ui/styles/spacing');
let _spacing2 = _interopRequireDefault(_spacing);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj};
}

exports.default = {
  spacing: _spacing2.default,
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  palette: {
    primary1Color: _colors.grey50,
    primary2Color: _colors.cyan700,
    primary3Color: _colors.grey600,
    accent1Color: _colors.lightBlue500,
    accent2Color: _colors.pinkA400,
    accent3Color: _colors.pinkA100,
    textColor: _colors.fullWhite,
    secondaryTextColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.7),
    alternateTextColor: '#303030',
    canvasColor: '#303030',
    borderColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.3),
    disabledColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.3),
    pickerHeaderColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.12),
    clockCircleColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.12)
  }
};

---

对于material ui版本1.0.0-beta.36，以下内容对我很有用：

<Tabs indicatorColor={'HEX_COLOR'}>

inkBarStyle在v1.0中肯定已被indicatorColor弃用/取代

编辑：链接到v1.0文档：

编辑：在v1.0稳定发布之后，以前的解决方案似乎不再有效

以下是剩余的解决方案：

对

指示器

类使用类覆盖

通过

primary

或

secondary

颜色配置主题调色板以使用所需的颜色。然后，您可以指定所需的

主

或

辅助

颜色，以便与上述

指示颜色

属性一起使用

---

类重写可能是更容易的选择。您需要使用

with style

组件来注入自定义样式类。原因是库的样式将覆盖您的类或样式化组件。上面链接的文档提供了一个很好的例子。

@Risa的解决方案效果很好，应该是公认的答案。我对她的解释的例子如下：

<Tabs
  fullWidth
  centered
  classes={{
    indicator: classes.indicator
  }}>
    <Tab />
    <Tab />
</Tabs>

---

您可以尝试此材质UI最新版本的支持选项卡IndicatorOps，通过它可以传递样式键

<Tabs TabIndicatorProps={{style: {background:'ANY_COLOR'}}}>......

。。。。。。

刚刚遇到这个问题，希望能帮助你们

          <Tabs classes={{ indicator: `your classes like underline` }} >
            <Tab
              classes={{ selected: `your classes like underline` }}
            />
            <Tab
              classes={{ selected: classes.selectedTab }}
            />
          </Tabs>

---

我把2019年的更新放在这里，因为我在这里没有找到答案。很多答案都被低估了

在没有太多痛苦的情况下重写的最好方法似乎是使用材质ui的makeStyle和withStyles

下面是一个带有选项卡的示例

您需要导入makeStyles

    import { makeStyles } from '@material-ui/core/styles'
    import Tabs from '@material-ui/core/Tabs'

     const useStyles = makeStyles((theme) => ({
     customOne: {
        padding: '3rem 15rem',
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        fontFamily: 'Open Sans',
     },
     customTwo: {
        padding: '0rem',
        color: '#484848',
        backgroundColor: 'white',
        fontFamily: 'Open Sans',
        fontSize: '1rem',
    },
   }))

下面是我使用makeStyles（）的自定义类

要获得更多覆盖，您还可以使用withStyles（）创建一个使用道具的函数，使用“按材质”ui（根等）：

const TabStyle=withStyles（（主题）=>({
根目录：{
填充：“1rem 0”，
textTransform:“无”，
fontWeight:theme.typography.fontWeightRegular，
fontSize:'1.2rem'，
fontFamily：[
“-苹果系统”，
“BlinkMacSystemFont”，
“机器人”，
].join（“，”），
“&：悬停”：{
背景颜色：“#004C9B”，
颜色：'白色'，
不透明度：1，
},
“&$selected”：{
背景颜色：“#004C9B”，
颜色：'白色'，
fontWeight:theme.typography.fontWeightMedium，
},
},
选项卡：{
填充：“0.5雷姆”，
fontFamily:“开放式SAN”，
fontSize:'2rem'，
背景颜色：“灰色”，
颜色：'黑色'，
“&：悬停”：{
背景颜色：“红色”，
颜色：'白色'，
不透明度：1，
},
},
选定：{}，
}))（（道具）=>）

在我的组件中，我定义了：const classes=useStyles（），允许在类中更改我的useStyles道具

我可以在任何时候使用自定义类，如下所示： className={classes.customOne}

    export default function TabsCustom({ activeTabIndex, onChange, values }) {
    const classes = useStyles()
    const [value, setValue] = React.useState(0)

    const handleChange = (event, newValue) => {
       setValue(newValue)
  }


    return (
        <div className={classes.customOne}>
            <Tabs
                className={classes.customTwo}
                variant="fullWidth"
                value={activeTabIndex}
                onChange={onChange}
                aria-label="tabs"
            >
                <TabStyle
                    value="updateDate"
                    icon={(<Icon>insert_invitation</Icon>)}
                    label={i18n.perYear}
                />

            </Tabs>
    </div>
   )
 }

导出默认函数TabsCustom（{activeTabIndex，onChange，values}）{
常量类=useStyles（）
常量[value，setValue]=React.useState（0）
常量handleChange=（事件，newValue）=>{
设置值（新值）
}
返回(
)
}

---

希望能有所帮助。如果我找到了这个解释，我会得到很多时间（和痛苦）。

示例一：

<Tabs TabIndicatorProps={{style: {background:'green'}}} >                    

Js:

示例二：

<Tabs TabIndicatorProps={{style: {background:'green'}}} >                    

---

现在，您可以使用选项卡IndicatorOps使用当前版本的MUI（4.10.02）设置活动指示器的样式。文件可用

有两种方法可以做到这一点：

方法1：使用样式

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core”导入{Tabs，Tab，makeStyles}；
常量选项卡指示器=（）=>{
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
);
};
导出默认选项卡指示器；

方法2：使用类

从“React”导入React；
导入PropType
    const TabStyle = withStyles((theme) => ({
    root: {
       padding: '1rem 0',
       textTransform: 'none',
       fontWeight: theme.typography.fontWeightRegular,
       fontSize: '1.2rem',
       fontFamily: [
           '-apple-system',
           'BlinkMacSystemFont',
           'Roboto',
       ].join(','),
       '&:hover': {
          backgroundColor: '#004C9B',
          color: 'white',
          opacity: 1,
       },
      '&$selected': {
          backgroundColor: '#004C9B',
          color: 'white',
          fontWeight: theme.typography.fontWeightMedium,
      },
  },
  tab: {
      padding: '0.5rem',
      fontFamily: 'Open Sans',
      fontSize: '2rem',
      backgroundColor: 'grey',
      color: 'black',
      '&:hover': {
          backgroundColor: 'red',
          color: 'white',
          opacity: 1,
      },
  },
  selected: {},
  }))((props) => <Tab {...props} />)

    export default function TabsCustom({ activeTabIndex, onChange, values }) {
    const classes = useStyles()
    const [value, setValue] = React.useState(0)

    const handleChange = (event, newValue) => {
       setValue(newValue)
  }


    return (
        <div className={classes.customOne}>
            <Tabs
                className={classes.customTwo}
                variant="fullWidth"
                value={activeTabIndex}
                onChange={onChange}
                aria-label="tabs"
            >
                <TabStyle
                    value="updateDate"
                    icon={(<Icon>insert_invitation</Icon>)}
                    label={i18n.perYear}
                />

            </Tabs>
    </div>
   )
 }

<Tabs indicatorColor="primary" classes={{ indicator: classes.indicator }}>

indicator:{
      backgroundColor: 'green'
    }

<Tabs TabIndicatorProps={{style: {background:'green'}}} >                    

import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";

const TabsIndicator = () => {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
       <Tabs
         value={value}
         onChange={handleChange}
         TabIndicatorProps={{
           style: { background: "cyan", height: "10px", top: "35px" }
         }}
       >
         <Tab label="TEST1" value={0} />
         <Tab label="TEST2" value={1} />
         <Tab label="TEST3" value={2} />
         <Tab label="TEST4" value={3} />
       </Tabs>
    </React.Fragment>
  );
};

export default TabsIndicator;

import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  indicator: {
    backgroundColor: "green",
    height: "10px",
    top: "45px"
  }
}));

const TabsIndicator = () => {
  const classes = useStyles();

  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
        <Tabs
          value={value}
          onChange={handleChange}
          TabIndicatorProps={{ className: classes.indicator }}
        >
          <Tab label="TEST1" value={0} />
          <Tab label="TEST2" value={1} />
          <Tab label="TEST3" value={2} />
          <Tab label="TEST4" value={3} />
        </Tabs>
    </React.Fragment>
  );
};

export default TabsIndicator;

<Tabs
value={value}
onChange={this.handleChange}
TabIndicatorProps={{
style: {
  backgroundColor: "#D97D54"
 }
}}
>
...
</Tabs>

<Tabs
   value={selectedTab}
   indicatorColor="secondary"
   textColor="secondary"
   className="w-full h-64"
>
 ...
</Tabs>