覆盖Material-UI样式无效

问题描述 投票:1回答:3

我是材料用户界面的新手。在这里,我试图覆盖材料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:没有过载与该调用匹配。

有人可以帮我吗?

javascript html css reactjs material-ui
3个回答
2
投票

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

示例:对于制表符

,所有的类名都可以在MUI Tabs CSS API中找到>>

除了普通的withStylesmakeStyles外,还有很多解决方案可以完全覆盖:

1.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);

enter image description here


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

enter image description here

Edit gallant-keller-kwtvj

很难用CSS覆盖Material UI,但是您可以使用Styled-ComponentsmakeStyle挂钩。

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

部分。([TabTabs

或者您可以使用className属性添加CSS类并覆盖样式。

注:这是js中的css,然后样式必须是与css不同的对象(camelCase属性)。


1
投票

很难用CSS覆盖Material UI,但是您可以使用Styled-ComponentsmakeStyle挂钩。


1
投票

您可以使用tabs提供给Material-UI here的api(props)。像这样:

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles(theme => ({
    tabRoot: {
       // ...
    },
    flexContainer: {
        width : 100%
        justifyContent :"space-between"
    }

}));

export default useStyles;
热门问题
推荐问题
最新问题