Question

只是想知道如何在 Material UI 中覆盖 Tab 组件的颜色？

<Tabs className={classes.tabs} inkBarStyle={{ background: 'white' }}>
            <Tab className={classes.tab} label="Home" />
            <Tab className={classes.tab} label="Build" />
            <Tab className={classes.tab} label="Launch" />
            <Tab className={classes.tab} label="About" />
            <Tab className={classes.tab} label="Contact" />
          </Tabs>

Answer 1

我认为“!important”可以用于此。对于 css 文件中的 ex：

标签{ 颜色：你的颜色！重要 }

喜欢的东西

Answer 2

在 v4 中，您需要使用 TabIndicatorProps Documentation

 <Tabs value={value} onChange={handleChange} 
     className={classes.tabsWrapper}
     TabIndicatorProps={{style: {background:'white'}}}
       <Tab label="TEST1" value={0} />
       <Tab label="TEST2" value={1} />
       <Tab label="TEST3" value={2} />
       <Tab label="TEST4" value={3} />
 </Tabs>

Answer 3

使用 Material UI 的 makeStyles method 并使用 Tab 将其传递给 className prop。 live demo can be found here。您的代码将如下所示：

导入makeStyles：

import { makeStyles } from "@material-ui/core/styles";

样式函数。我们将把我们的样式传递给 'root' rule name:

const tabStyles = makeStyles((theme) => ({
  root: {
    color: "black"
  }
}));

在组件内部调用样式函数：

  const tabClasses = tabStyles();

通过 Tab component 将 tabClasses 传递给 className prop：

<Tabs
    value={value}
    onChange={handleChange}
    aria-label="simple tabs example"
>
    <Tab className={tabClasses.root} label="Item One" {...a11yProps(0)} />
    <Tab label="Item Two" {...a11yProps(1)} />
    <Tab label="Item Three" {...a11yProps(2)} />
</Tabs>

或者对于完整的栏：

<Tabs
    className={tabClasses.root}
    value={value}
    onChange={handleChange}
    aria-label="simple tabs example"
>
    <Tab label="Item One" {...a11yProps(0)} />
    <Tab label="Item Two" {...a11yProps(1)} />
    <Tab label="Item Three" {...a11yProps(2)} />
</Tabs>

Answer 4

所以，我道歉。您所有的解决方案都有效，但我愚蠢地没有检查不透明度是否设置为 0.7，这导致了我的问题。我道歉。

如何在 Material UI 中覆盖 Tab 组件的文本颜色

4 个答案: