MUI主题覆盖的SX道具类

Question

我正在尝试使用sx支柱来设计组件。

<Typography
        variant='h1'
        align='center'
        sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }}
    >
        Admin Panel
</Typography>

问题是: MUI主题中的类具有更多的CSS特性，并且覆盖了sx支柱中的类。

下面是用于排版的MUI主题设置：

typography: {
        h1: {
            fontSize: '2rem',
            '@media screen and (min-width: 768px)': {
                fontSize: '3rem',
            },
            '@media screen and (min-width: 1024px)': {
                fontSize: '3.5rem',
            },
        },
    },

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

​

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

Answer 1

预计您的主题样式有更多的特殊性。@media screen and (min-width: 768px) .root'的选择器的重量大于.root。将!important添加到sx支柱(实际上不推荐的)或将@media sreen...添加到sx样式中