有什么办法可以改变material-ui标签指示器在悬停时的背景颜色和标签的活动状态答案

【问题标题】：Is there any way to change the background color of material-ui tab indicator on hover and active state of Tab有什么办法可以改变material-ui标签指示器在悬停时的背景颜色和标签的活动状态
【发布时间】：2020-09-07 08:20:06
【问题描述】：

有什么办法可以改变material-ui tab指示器在hover时的背景颜色和Tab的活动状态。

默认状态

在悬停时，我想像这样设置标签指示器的样式

我找不到任何使用 css 进行修改的方法。对此的任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： material-ui

【解决方案1】：

您需要为标签指示器和悬停/选定状态标签指定样式规则，here's the demo：

const useStyles = makeStyles((theme) => ({
  indicator: {
    backgroundColor: "yellow",
  },
  tabRoot: {
    "&:hover": {
      color: "yellow",
      opacity: 1
    }
  },
  selectedTab: {
    color: "yellow"
  }
 }));

<Tabs classes={{ indicator: classes.indicator }}>
    <Tab
      classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
      label="Item One"
    />
    <Tab
      classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
      label="Item Two"
    />
    <Tab
      classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
      label="Item Three"
    />
</Tabs>

【讨论】：

谢谢@dongnhan。此解决方案适用于活动状态，但我正在寻找“悬停”状态。
嗨@Raghav，我已经更新了解决方案和演示，请查看。