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

您可以使用material-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

请参考here，了解有关如何为CSS覆盖Tab的其他方法。

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

如何设置Material UI的Tab组件标签的样式？

1 个答案: