SX 道具类被 MUI 主题覆盖

Question

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

这也是它在开发工具中的外观：

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

Answer 1

预计您的主题样式具有更多特异性。选择器的权重@media screen and (min-width: 768px) .root'大于 的选择器权重.root。要么添加!important到你的sx道具（实际上不推荐），要么添加@media sreen...到你的sx样式