我是 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.
谁能帮我这个?
最佳答案
首先,如果你检查 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%);
}
关于javascript - 覆盖 Material-UI 样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60925175/