javascript - 覆盖 Material-UI 样式不起作用

Question

我是 Material UI 的新手。在这里，我试图覆盖 Material 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
    }
/>

所以，在这里我试图覆盖 flexContainer使用这个 CSS 类:

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

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

TS2769: No overload matches this call.

谁能帮我这个？

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>;

你会发现需求类名是 MuiTabs-flexContainer (而不是 tabFlexContainer )

示例:对于 标签 ，所有的className都可以在 MUI Tabs CSS API中找到

解决方法很多，除了正常的 withStyles和 makeStyles , 完全覆盖:

1.Material-UI解决方案

1.1 使用MUI内部风格HOC 带样式完全覆盖组件。

使用 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 正常使用 创建样式 或 制作样式 风格解决方案

经典组件
withStyles(高阶函数)+ createStyles

功能组件
useStyles (钩子(Hook)) + makeStyles

详情引用: https://stackoverflow.com/a/60736142/11872246

2.Styled-Components解决方案

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

你可以试试 styled-components

styled-components allows you to write actual CSS code to style your components.

用法:

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%);
}