Javascript 如何自定义物料界面中活动页签的字体大小

我的要求是，只有活动选项卡应该有特定的颜色和字体大小

这是我的代码：

                    <Tabs
                        value={value}
                        onChange={handleChange}
                        classes={{indicator: classes.customStyleOnActiveTab}}
                        aria-label="some text"
                        >
                        <Tab label={<span className={classes.customStyleOnTab}>Tab 1</span>} />
                        <Tab label={<span className={classes.customStyleOnTab}> Tab 2</span>}/>
                    </Tabs>

但是，它会更改两个选项卡上的样式，而我只希望活动选项卡具有特定样式（蓝色和粗体字体）。另一个选项卡应具有正常的

字体大小

和

颜色

：

---

如果我使用

textColor

属性，我可以获得所需的结果，但无法对其进行自定义。我深入研究了material文档，并最终尝试了他们公开的所有CSS类，但没有任何运气将自定义/不同样式添加到活动选项卡。您可以有条件地为活动选项卡指定一个类。每个

选项卡都有自己的值（这也是它们的索引值），并有条件地为它们分配类

以下是codesandbox的链接：-


从“React”导入React，{useState}；
导入“/styles.css”；
从“@material ui/core”导入{Tabs，Tab，makeStyles}
导出默认函数App（）{
常量类=useStyles（）
const[value，setValue]=useState（0）
常量handleChange=（e，newVal）=>{
设置值（newVal）
}
返回(
);
}
const useStyles=makeStyles({
自定义样式选项卡：{
字体大小：'15px'，
颜色：'绿色'
},
自定义样式激活选项卡：{
颜色：'红色'
},
活动选项卡：{
字体大小：'16px'，
重量：'600'，
颜色：'粉红色'
}
})

此外，您还可以将类名指定给
选项卡
元素，而不是
span
，以保持
标签
道具干净、整洁和统一。
另一种可能的解决方案是使用

。。。
从“@material ui/core/Tab”导入{default as MuiTab}”；
从“@material ui/core/styles”导入{withStyles}”；
常量样式={
//检查https://material-ui.com/api/tab/#css
//获取更多可重写样式
选定：{
字体大小：“16px”，
重量：“600”，
颜色：“粉色”
}
};
常量选项卡=带有样式（样式）（（道具）=>）；
函数App（）{
const[value，setValue]=React.useState（0）；
常量handleChange=（e，newVal）=>{
设置值（newVal）；
};
返回(
);
}

您可以使用makeStyle进行更改

const useStyle = makeStyles((theme) => ({
   tab: {
     "& .Mui-selected": {
      color: "red",
      fontSize: "20px"
     }
   }
})

然后


“并最终尝试了他们公开的所有CSS类”-您在哪里使用这些CSS类？您的新样式规则是否包含选择器？如果没有其他内容，则始终存在
！重要信息
@Dai
！重要提示
diesn不做这项工作（比如如果我试图覆盖，
wrapper
class；它只是在控制台上抛出一个警告，表示您无法覆盖它），因为以下是我可以放置cusom css的唯一类：
root、垂直、flexContainer、flexContainerVertical、居中、滚动、固定、可滚动、滚动按钮，scrollButtonsDesktop，indicator。
我正试图用我为
indicator所做的方式覆盖这些类。是的，事实上这就是我所做的，并打算将此作为一个答案发布：D无论如何，我希望
CSS
在材质UI中更“可覆盖”。）CSS是“可覆盖”的材质UI。掌握这些方法只是需要一些时间。在过去的6个月里，我一直在广泛地使用material UI，我建议不要忽略他们文档中的一个单词如果你们在材料界面方面需要帮助，我很乐意帮忙
const useStyle = makeStyles((theme) => ({
   tab: {
     "& .Mui-selected": {
      color: "red",
      fontSize: "20px"
     }
   }
})

<Tabs
   className={classes.tab}
>
   <Tab label="Teacher Information" />
   <Tab label="Contract" />
</Tabs>