css SX prop 类被MUI主题覆盖

vcudknz3 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(188)

我正在尝试使用 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',
            },
        },
    },

下面是它在开发工具中的外观：

这是预期的行为吗？有什么办法可以解决这个问题吗？

css

来源：https://stackoverflow.com/questions/70183175/sx-prop-classes-overridden-by-mui-theme

2条答案

按热度按时间

idv4meu81#

希望你的主题中的样式有更多的特殊性。@media screen and (min-width: 768px) .root'的选择器权重大于.root。要么添加一个!important到你的sx prop （实际上并不推荐），要么添加@media sreen...到你的sx样式

赞(0）回复(0）举报 2023-05-02

ee7vknir2#

媒体的询问并没有增加特异性。在这种情况下，css文件中的位置将决定。

@media screen and (min-width: 768px) {
  body {
    background: salmon;
  }
}

body {
  background: beige;
}

将在body上输出米色背景，因为它是在之后定义的。
在OP的情况下，也许MUI是把媒体查询的最后生成的文件，在所有其他的sx？
（我之所以贴出答案，是因为我不能在评论中写代码或段落。抱歉，社交失礼）
而且，我知道现在已经很晚了，我希望OP已经找到了一种方法，但我想强调的是，媒体的询问并不能增加特异性。

赞(0）回复(0）举报 2023-05-02

我来回答

css SX prop 类被MUI主题覆盖

2条答案

相关问题

热门标签

最新问答