覆盖 Material-UI 样式不起作用

Posted 2023-02-22

【中文标题】覆盖 Material-UI 样式不起作用

【英文标题】：Overriding the material-UI style not working

【发布时间】：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 任何解决方案都适合我，

【参考方案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 或ma​​keStyles 样式解决方案

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

功能组件 useStyles (hooks) + makeStyles

详情参考：https://***.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 道具。

很棒的解决方案人。感谢您的努力。我确实有一个问题***.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"来实现空格效果