我正在尝试使用 sx MUI属性来设计一个组件的样式。
<Typography
variant='h1'
align='center'
sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }}
>
Admin Panel
</Typography>
问题是:来自MUI主题的类具有更多的CSS特性,并覆盖来自 sx prop的类。
以下是排版的MUI主题设置:
typography: {
h1: {
fontSize: '2rem',
'@media screen and (min-width: 768px)': {
fontSize: '3rem',
},
'@media screen and (min-width: 1024px)': {
fontSize: '3.5rem',
},
},
},
下面是它在开发工具中的外观:
这是预期的行为吗?有什么办法可以解决这个问题吗?
2条答案
按热度按时间idv4meu81#
希望你的主题中的样式有更多的特殊性。
@media screen and (min-width: 768px) .root'
的选择器权重大于.root
。要么添加一个!important
到你的sx
prop (实际上并不推荐),要么添加@media sreen...
到你的sx
样式ee7vknir2#
媒体的询问并没有增加特异性。在这种情况下,css文件中的位置将决定。
将在body上输出米色背景,因为它是在之后定义的。
在OP的情况下,也许MUI是把媒体查询的最后生成的文件,在所有其他的sx?
(我之所以贴出答案,是因为我不能在评论中写代码或段落。抱歉,社交失礼)
而且,我知道现在已经很晚了,我希望OP已经找到了一种方法,但我想强调的是,媒体的询问并不能增加特异性。