我是材质 UI 的新手。在这里，我试图覆盖材质 UI 的 CSStabs component.
<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
}
/>
所以，在这里我试图flexContainer用这个 CSS覆盖类：
. tabFlexContainer {
width : 100%
justify -content :space-between
}
所以，当我使用时，我只会收到编译时间错误，
TS2769：没有与此调用匹配的过载。
谁能帮我这个？
首先，如果你检查DOM结构
<div class="MuiTabs-root Tabs" aria-label="disabled tabs example">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
</div>
</div>
</div>;
你会发现需求 className 是MuiTabs-flexContainer（而不是tabFlexContainer）
示例：对于Tabs，所有 className 都可以在MUI Tabs CSS API 中找到
除了 normalwithStyles和之外，还有很多解决方案makeStyles可以完全覆盖：
1.1 使用 MUI 内部样式 HOC withStyles来完全覆盖组件。
使用嵌套选择器
import { Tabs, Tab, withStyles } from "@material-ui/core";
const StyledTabs = withStyles({
root: {
background: "light-blue",
...
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
"& div.MuiTabs-scroller": {
"& .MuiTabs-flexContainer": {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
}
}
}
})(Tabs);
1.2 使用普通的createStyles或makeStyles样式解决方案
经典组件
withStyles（高阶函数）+ createStyles
功能组件
useStyles(hooks) + makeStyles
详细参考：https : //stackoverflow.com/a/60736142/11872246
如果您想使用单独的 CSS 文件来设置 MUI 组件的样式
你可以试试样式组件
styled-components 允许您编写实际的 CSS 代码来设置组件的样式。
用法：
import styled from 'styled-components';
import { Tabs, Tab, withStyles } from "@material-ui/core";
const StyledTabs = styled.Tabs`
font-size: 1.5em;
...
`;
import "./styles.css";
div.MuiTabs-flexContainer {
background: linear-gradient(45deg, red 30%, #ff8e53 90%);
}
您可以在此处tabs使用Material-UI提供的 api(props) 。像这样：
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>
或者您可以使用classNameprop 添加 css 类并覆盖样式。
注意：js 中是 css，那么 style 必须是一个对象（camelCase 属性），而不是 css。
使用 CSS 覆盖 Material UI 非常困难，但您可以使用HookStyled-Components或makeStyleHook。
您可以添加 variant="fullWidth"以实现间隔效果