gpt4 book ai didi

css - 如何覆盖 material-ui react 组件的 @media css

转载 作者:技术小花猫 更新时间:2023-10-29 11:09:44 24 4
gpt4 key购买 nike

this question我询问了如何覆盖 material-ui 组件的 css 属性,并提供了一个很好的示例。但是,在尝试设置 Toolbar 组件的高度时,我发现由于过度拱形的@media 规范,我无法覆盖 css。以下 MuiTheme 规范是我的方法:

const theme = createMuiTheme({
overrides: {
MuiToolbar: {
regular: {
height: "32px",
minHeight: "32px"
}
},
}
});

这是被覆盖的 css 的视觉效果:

enter image description here

如果我引入 hack 并将 !important 添加到 minHeight 中,它就会起作用。此处显示了一个代码框:https://codesandbox.io/s/4xmr2j2ny9

使用 MuiTheme 覆盖 @media 规范的正确方法是什么?

最佳答案

您必须像下面那样添加它。媒体查询语句应该用单引号括起来。

 MuiToolbar: {
regular: {
backgroundColor: "#ffff00",
color: "#000000",
height: "32px",
minHeight: "32px",
'@media (min-width: 600px)': {
minHeight: "48px"
}
},

请查找代码sandox - https://codesandbox.io/s/q8joyrrrwj

关于css - 如何覆盖 material-ui react 组件的 @media css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52043271/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com