覆盖Material-UI样式不起作用

Question

我是材料UI的新手。在这里，我试图覆盖材料UI tabs component.

的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
    }
/>

因此，在这里，我尝试使用此CSS覆盖flexContainer类：

. tabFlexContainer {
   width : 100%
  justify -content :space-between
}

所以，当我使用时，我只会收到编译时错误，

TS2769：没有过载与该调用匹配。

有人可以帮我吗？

Answer 1

首先，如果您检查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）

示例：对于标签，所有的className都可以在MUI Tabs CSS API

中找到

---

除了普通的withStyles和makeStyles以外，还有很多解决方案可以完全覆盖：

1.Material-UI解决方案

1.1使用MUI内部样式HOC withStyles 完全覆盖该组件。

使用nesting selector

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（挂钩）+ makeStyles

详细信息：https://stackoverflow.com/a/60736142/11872246

---

2.Styled-Components解决方案

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

您可以尝试styled-components

styled-components允许您编写实际的CSS代码来设置组件的样式。

用法：

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

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

---

3。单独的纯CSS解决方案

引用：css_selectors

import "./styles.css";

div.MuiTabs-flexContainer {
  background: linear-gradient(45deg, red 30%, #ff8e53 90%);
}

Answer 2

您可以使用Material-UI here提供给tabs的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>

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

或者您可以使用className道具来添加CSS类并覆盖样式。

注意：这是js中的css，然后样式必须是与css不同的对象（camelCase属性）。

Answer 3

使用CSS覆盖Material UI非常困难，但是您可以使用Styled-Components或makeStyle钩子。

Answer 4

可以添加variant="fullWidth"来实现间隔效果