覆盖 Material-UI 样式不起作用答案

【问题标题】：Overriding the material-UI style not working覆盖 Material-UI 样式不起作用
【发布时间】：2020-07-10 12:06:40
【问题描述】：

我是材质 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：没有与此调用匹配的重载。

谁能帮我解决这个问题？

【问题讨论】：

这是. tabFlexContainer 错字吗？如果没有，你不应该在类名和点 . 之间有空格。应该是.tabFlexContainer
这是一个错字。但它不起作用
@keikai 任何解决方案都适合我，

标签： javascript html css reactjs material-ui

【解决方案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）

示例：对于Tabs，所有的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 (hooks) + 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%);
}

【讨论】：

我真的很感谢你的工作，但如果我们按照我的意思是我有一个单独的 CSS 文件并且那里有一个单独的 CSS 文件，是否有可能
事情就是我从一开始就遵循的方式，所以请你帮忙。我被困在这里了。 :-)
对不起，我没有为此使用样式化组件
实际上，我正在尝试使用可以覆盖默认 css 属性的 classes 道具。
很棒的解决方案人。感谢您的努力。我确实有一个问题stackoverflow.com/questions/60931950/…。你能看看吗，

【解决方案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 prop来添加css类并覆盖样式。

注意：js中是css，那么style必须是对象（camelCase属性），不像css。

【讨论】：

对我来说，这个解决方案最容易实施。如果你想覆盖另一个道具js ... classes={{ flexContainer: classes.flexContainer , indicator:classes.newIndicatorClass}} ...

【解决方案3】：

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

【讨论】：

你忘记了s makeStyles

【解决方案4】：

你可以添加variant="fullWidth"来实现空格效果

【讨论】：