如何设置材质 UI 的选项卡组件标签的样式？

Question

我正在寻找一种方法来自定义Tab组件内文本的颜色，但同时保留在选择为活动选项卡时对其进行着色的能力。

示例代码：

<Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorColor={'secondary'}>
<Tab label={'Hello There'} style={{color: '#fff'}}/>
<Tab label={'Hello There'} style={{color: '#fff'}}/>
<Tab label={'Hello There'} style={{color: '#fff'}}/>
</Tabs>

上述代码将导致文本颜色的更改但是当Tab变为活动时，它不会被覆盖。

如果有帮助的话，我也会使用styled-components以便于使用。

Answer 1

您可以使用材料ui的makeStyles导出为标签创建自定义类

import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles({
customLabelColor: {
color: "#fff"
}
});
export default function App() {
const classes = useStyles();
return (
...
<Tab
label={"Hello There"}
classes={{
textColorSecondary: classes.customLabelColor
}}
/>
...
);
}

CodeSandBox：https://codesandbox.io/s/quirky-kowalevski-xzf7g?file=/src/App.js

---

有关如何为Tab覆盖CSS的其他方法，请参阅此处。

在我链接的同一引用上，查看textColorSecondary规则名称。这是特定于您的问题，因为您在父组件Tabs上使用textColor="secondary"