Question

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

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

Answer 1

嗯，你有两个选择：

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

但最简单的方法是使用inkBarStyle属性您可以在docs中看到它例如：

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

Answer 2

@ Risa的解决方案工作正常，应该是公认的答案。我的解释示例如下：

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

和样式：

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

Answer 3

对于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稳定发布之后，似乎以前的解决方案不再有效。

以下是其他解决方案：

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

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

Answer 4

示例一：

Js：

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

样式：

indicator:{
      backgroundColor: 'green'
    }

示例二：

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

Answer 5

嗨，如果有人仍然在更改颜色方面遇到问题，请关注以下内容

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

Answer 6

虽然这是一个相当古老的问题，但它仍然受到一些关注，对于我们这些使用多个和大量定制主题的人来说，这是一个麻烦。我有一个更好的解决方案，允许您根据主题

以不同的颜色自定义它

首先，通过以这种方式将其添加到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.如果您希望不同的标签具有不同的下划线，请将其命名为仪表板标签，如果标签位于仪表板或快速面板标签（如果它们是快速面板的一部分等），则将其命名为2.如果您的标签将是基本上相同，将它命名为更全局的材料标签，现在您可以在任何地方使用该类，您的css将无需再次创建即可。

现在，将此类用作钩子类，并使用特异性来达到下划线，如此

.dashboard-tabs > div{
    background-color: #333 !important;
}
.dashboard-tabs > div:nth-child(2) > div{
    background-color: #ddd !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 7

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

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

Answer 8

我在这里结束了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（根等）创建使用道具的函数：

    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 9

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

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

方法1：使用样式

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;

方法2：使用类

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 10

这是一个在项目中使用的主题模板：

'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 11

您可以尝试此材料UI最新版本支持TabIndicatorProps，通过它可以传递样式键。

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

Answer 12

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

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

Answer 13

从 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 14

你可以制作一个用JQuery JavaScript动画的粉红色div。它将保持在绿色div内，与标签颜色相同。

如何更改React material-ui中的活动标签颜色？

14 个答案: