Material-UI v5 + Emotion - 需要媒体查询覆盖/优先级吗？

Question

将 Material-UI v4 与 makeStyles/useStyle 结合使用时，自定义 CSS 优先于媒体查询。现在，使用 v5 和 Emotion 似乎您必须额外覆盖 Material-ui 的媒体查询 CSS，因为它是在自定义 CSS 之后加载的，优先于您自己的 CSS。

图 1 显示了应用其他样式从 '@material-ui/core' 组件导入 { Container } 的makeStyle，紫色，它位于顶部，因此填充始终为 80px。

图 2 显示了使用 Emotion 样式的相同容器，紫色是自定义 css，红色矩形显示该组件的material-ui 媒体查询 css 具有优先级

在css中添加媒体查询解决了这个问题，例如像这样

<Container maxWidth="lg"
        css={css`
            margin-top: 80px;
            padding: 80px; 
            @media (min-width: 600px) {
                padding: 80px;
                color: yellow;
            }
        `}
        {...rest}>
        {children}
    </Container>

图 3，添加了媒体查询后，您自己的 mq 现在具有优先权。

现在我只是想知道这是预期的行为，现在我们需要通过 MUI 覆盖所有媒体查询，或者我们需要在配置中执行某些操作。

顺便说一句，通常建议为此设置的一种配置已经存在

<ThemeProvider theme={themeConfiguration}>
        <StyledEngineProvider injectFirst>
            <StylesProvider jss={jss}>
                <CssBaseline />