SX prop classes overridden by MUI theme

Question

I am trying to style a component using the sx MUI prop.

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

The problem is: classes from MUI theme have more CSS specificity and override those from sx prop.

Here is MUI theme setup for typography:

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

Here is also how it looks in dev tools:

Is this expected behavior? Is there any way I can solve this?

Answer 1

It is expected that styles from your theme have more specificity. the selector's weight of @media screen and (min-width: 768px) .root' is bigger than just of .root. Either add an !important to your sx prop (what is not actually recommended) or add the @media sreen... to your sx styles as well