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

Question

如何更改活动标签的颜色？

我的意思是，这条pink 行，看图片。

Answer 1

你可以试试这个材质UI最新版本支持TabIndicatorProps，通过它可以传递style key。

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

Answer 2

嗯，你有两个选择：

您可以自定义主题：
http://www.material-ui.com/#/customization/themes

但最简单的方法是使用 inkBarStyle 属性。
你可以在docs..
中看到它 示例：

<Tabs inkBarStyle={{background: 'blue'}}>...

Answer 3

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

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

和样式：

const styles = theme => ({
  indicator: {
    backgroundColor: 'white',
  },
})

Answer 4

嗨，如果有人在更改颜色时仍然遇到问题，以下对我有用

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

Answer 5

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

最好的重写方法似乎是使用material-ui的makeStyle和withStyles。

这是一个带有标签的示例。

你需要导入 makeStyles

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

这是我使用 makeStyles() 的海关类

     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',
    },
   }))

对于更多的覆盖，您还可以使用 withStyles() 创建一个使用材质 ui（root 等）使用道具的函数：

    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} />)

在我的组件中我定义： 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>
   )
 }

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

Answer 6

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

<Tabs indicatorColor={'HEX_COLOR'}>

inkBarStyle 在 v1.0

中必须已被 indicatorColor 弃用/替换

编辑：链接到 v1.0 文档：https://material-ui-next.com/api/tabs/

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

以下是剩余的解决方案：

1. 为indicator 类使用类覆盖。 Link to docs on overrides.Link to docs Tab component with CSS API classes at bottom.
2. 通过primary 或secondary 颜色意图配置您的主题调色板以使用您想要的颜色。然后，您可以指定您想要的primary 或secondary 颜色与上述indicatorColor 属性一起使用。 Link to Docs.

类覆盖可能是更简单的选择。您需要使用withStyles 组件来注入您的自定义样式类。原因是库的样式将覆盖您的类或样式组件。上面链接的文档提供了一个很好的例子。

Answer 7

示例一：

Js：

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

风格：

indicator:{
      backgroundColor: 'green'
    }

示例二：

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

Answer 8

试试这个

import { makeStyles} from '@mui/styles';

    const useStyles = makeStyles({
  tabs: {

    "& .MuiTabs-indicator": {
      backgroundColor: "orange",
      height: 3,
    },
    "& .MuiTab-root.Mui-selected": {
      color: 'red'
    }
  }
})

然后

const classes = useStyles();
<Tabs
    value={value}
    onChange={handleChange}
    // textColor="secondary"
    // indicatorColor="secondary"
    aria-label="secondary tabs example"
    className={classes.tabs}
    // TabIndicatorProps={{
    //   style: { background: "green", height: 3}
    // }}
  >
  <Tab label={<span className={styles.tabs}>{ABOUT_US}</span>} component={Link} to="/about-us" />
  <Tab label={<span className={styles.tabs}>{ABOUT_HANBANABORINA}</span>} component={Link} to="/about-hanbanaborina" />
  <Tab label={<span className={styles.tabs}>{DOWNLOAD_APPLICATION}</span>} component={Link} to="/download" />
  <Tab label={<span className={styles.tabs}>{HOME}</span>} component={Link} to="/" />
  </Tabs>

Answer 9

刚好遇到这个问题，希望对大家有所帮助；

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

Answer 10

您现在可以使用 TabIndicatorProps 为当前版本的 MUI (4.10.02) 设置活动指示器的样式。文档可用here。

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

方法一：使用风格

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;

您也可以查看我的sandbox here。希望这会有所帮助！

Answer 11

MUI v5 更新

您可以在 MUI v5 中使用 sx 属性来代替内联样式。声明自定义颜色：

<Tabs
  {...}
  TabIndicatorProps={{
    sx: {
      backgroundColor: 'red',
    },
  }}
>

许多sx 属性也是theme aware。要使用调色板中的一种颜色：

<Tabs
  {...}
  TabIndicatorProps={{
    sx: {
      backgroundColor: 'secondary.main',
    },
  }}
>

或者如果您想全局更改指示器颜色：

const theme = createTheme({
  components: {
    MuiTabs: {
      styleOverrides: {
        indicator: {
          backgroundColor: 'orange',
          height: 3,
        },
      },
    },
  },
});

现场演示

Answer 12

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

首先，创建一个可以通过这种方式将其添加到 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>

请记住，我的选项卡和您的选项卡可能不同，因此请仅注意 className 行。你可以随意命名它。 1. 如果您想让不同的选项卡有不同的下划线，请将其命名为有意义的名称，例如，如果选项卡在仪表板中，则为 dashboard-tabs；如果它们是快速面板的一部分，则为 quickpanel-tabs 等。 2. 如果您的选项卡将本质上是一样的，将它命名为更全局的材质选项卡，现在您可以在任何地方使用该类，您的 css 将可以正常工作，而无需再次创建它。

现在，使用这个类作为一个钩子类，并使用特异性到达下划线，像这样

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

不用担心 !important。使用 !important 的禁忌很糟糕，只不过是一个大禁忌。你会没事的。

这是一个 SCSS 示例

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

如果您使用多个主题，此解决方案将非常有用，因为（假设您正确设置了主题），您应该在代码中的上方添加一个动态主题类，将您的 UI 从一种颜色更改为另一种颜色。所以，假设你有 2 个主题。 1 是浅色，使用主题类light-theme，2 是深色主题，使用dark-theme 类

现在，您可以这样做：

.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 解决方案？因为您将一种背景颜色替换为另一种背景颜色，但仍然无法跨主题更改它

祝大家好运！

Answer 13

这是您项目中使用的主题模板：

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

Answer 14

如果您想从 Material UI 切换颜色，可以使用 Tabs 的 indicatorColor 和 textColor 属性。

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

Answer 15

从 2021 和 4.11.1 版开始，您可以这样做：

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

const StyledTabs = withStyles({
  indicator: {
    backgroundColor: 'orange'
  }
})(Tabs);

然后使用 StyledTabs，而不是 Tabs。

文档链接：

https://material-ui.com/api/tabs/#css

https://material-ui.com/customization/components/#shorthand

Answer 16

MUI v5.2.0

由于Tabs 组件的道具也可用于TabList，我们可以将TabIndicatorProps 与TabList 和sx 道具一起用于样式

<TabList TabIndicatorProps={{ sx: { backgroundColor: 'green'} }} >

• sx 属性是定义可以访问主题的自定义样式的快捷方式。

Answer 17

您可以使用 JQuery 的 JavaScript 制作一个粉红色的 div。它将保存在与选项卡颜色相同的绿色 div 中。