css - 从v4升级到v5 material-ui，css坏了

Question

我将自定义 css 用于 material-ui（新 MUI）项目。

我尝试使用版本 5 的新包，但我的旧 CSS 似乎无法正常工作。

我想知道是否有一个技巧可以用来修复它们。

例如我正在使用：Accordion、AccordionSummary、AppBar、Tabs、Tab 等等...

import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    AppBar,
    Avatar,
    Box,
    Chip,
    Grid,
    Tab,
    Tabs,
    Typography,
} from '@mui/material';
...
<StylesProvider injectFirst>
    <Accordion className="contract-card-wrapper">
                <AccordionSummary
                    className="contract-accordion-summary"
                    expandIcon={<img src={ExpandMoreIcon} alt="expand-more-icon" />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                >
                </AccordionSummary>
               ...
</StylesProvider>

注意：我将 ... 用于某些代码块。在CSS中

.MuiAccordionDetails-root {
  display: flex;
  flex-direction: column;
}
...

但它目前似乎不起作用。我怎样才能再次覆盖它们？覆盖material-ui组件样式的正确方法是什么？尤其是版本 5。

标签： cssreactjsmaterial-ui