Javascript 覆盖材质UI样式不起作用

我是新的材料用户界面。在这里，我试图覆盖材质UI

tabs组件的CSS。

<Tab
    key={`${tab}_${index}`}
    classes={{
    flexcontainer: css.tabFlexContainer
    }}
    disableRipple
    label={tab.label}
    value={tab.value}
    icon={
    tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
    }
/>

所以，当我使用时，我只得到一个编译时间错误

TS2769:没有与此调用匹配的重载

---

有人能帮我吗？

使用CSS覆盖材质UI非常困难，但您可以使用

样式化组件

或

制作样式

挂钩。

首先，如果您检查DOM结构

;

您会发现需求类名称是MuiTabs flexContainer（而不是

tabFlexContainer

）

示例：对于选项卡，可以在

---

除了正常的

样式

和

生成样式

之外，有许多解决方案可用于完全覆盖：

1.1.1-UI解决方案 1.1使用MUI内部样式HOC和样式完全覆盖组件

使用

---

1.2使用普通createStyles或makeStyles样式解决方案

经典成分
withStyles（高阶函数）+createStyles

功能组件
使用样式（挂钩）+制作样式

详情请参阅：

---

2.2.1.1.1.1.2.2.2.2.1.1.1.1.1.1.1.2.1.1.1.1.1.2.2.2.2.2.2.2 如果要使用单独的CSS文件来设置MUI组件的样式

你可以试试

样式化组件允许您编写实际的CSS代码来设置组件的样式

用法：

import styled from 'styled-components';
import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = styled.Tabs`
  font-size: 1.5em;
  ...
`;

---

3.单独的纯CSS解决方案 参考：

div.MuiTabs-flexContainer{
背景：线性梯度（45度，红色30%，#ff8e53 90%）；
}

您可以使用提供给

选项卡的api（道具）。像这样：

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

const useStyles = makeStyles(theme => ({
    tabRoot: {
       // ...
    },
    flexContainer: {
        width : 100%
        justifyContent :"space-between"
    }

}));

export default useStyles;

在组件中使用：

const classes = useStyles();
// ...

<Tabs
    classes={{ flexContainer: classes.flexContainer }} // override for tabs
   ...
>
    <Tab classes={{ root: classes.tabRoot}}  /> // override for tab
</Tabs>

const classes=useStyles（）；
// ...
//替代制表符

请参阅这些链接的CSS部分。（，）

或者您可以使用
className
prop添加css类并覆盖样式

注意：它是js中的css，那么样式必须是一个对象（camelCase属性），而不是css。
您可以添加
variant=“fullWidth”
来实现空格效果。
这是
吗。tabFlexContainer
输入错误？如果不是，则在类名和点
之间不应该有空格。它应该是
.tabFlexContainer
这是一个打字错误。但事实并非如此work@keikai任何解决方案都可以，我非常感谢你的工作，但是如果我们按照我的意思，我有一个单独的CSS文件，这就是我从一开始就遵循的方式，那么，你能帮我一点忙吗。我被困在这里了。：-）很抱歉，我没有为此使用样式化组件实际上，我正在尝试使用类道具，通过这些道具，我可以覆盖默认的css属性。谢谢你的努力。我确实有一个问题。你能看一下吗，你忘了
s
的
makeStyles
import "./styles.css";

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

const useStyles = makeStyles(theme => ({
    tabRoot: {
       // ...
    },
    flexContainer: {
        width : 100%
        justifyContent :"space-between"
    }

}));

export default useStyles;

const classes = useStyles();
// ...

<Tabs
    classes={{ flexContainer: classes.flexContainer }} // override for tabs
   ...
>
    <Tab classes={{ root: classes.tabRoot}}  /> // override for tab
</Tabs>