如何在MUI Accordion中添加背景图片？CSS样式不生效问题

核心原因 #

MUI组件自带的类样式优先级较高，普通CSS规则难以直接覆盖。

解决方案 #

1. 提升CSS选择器优先级 #

通过更精确的选择器匹配折叠状态的Accordion，优先避免使用!important（必要时再用）：

/* 匹配未展开（折叠）状态的Accordion */
.MuiAccordion-root:not(.Mui-expanded) {
  background: url('./image.svg') center/cover no-repeat;
}

/* 若仍不生效，可添加父元素类名进一步提升优先级 */
.your-parent-container .MuiAccordion-root:not(.Mui-expanded) {
  background: url('./image.svg') center/cover no-repeat;
}

2. 使用MUI官方样式方案（推荐） #

利用MUI原生样式系统定制组件，兼容性更好：

方式一：styled组件

import { styled } from '@mui/material/styles';
import Accordion from '@mui/material/Accordion';

const StyledAccordion = styled(Accordion)({
  '&:not(.Mui-expanded)': {
    backgroundImage: 'url("./image.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
  },
});

// 使用时替换原生Accordion
<StyledAccordion>...</StyledAccordion>

方式二：makeStyles

import { makeStyles } from '@mui/material/styles';
import Accordion from '@mui/material/Accordion';

const useStyles = makeStyles({
  foldedAccordion: {
    '&:not(.Mui-expanded)': {
      background: 'url("./image.svg") center/cover no-repeat',
    },
  },
});

// 组件内使用
const classes = useStyles();
<Accordion className={classes.foldedAccordion}>...</Accordion>

3. 验证图片路径 #

确认image.svg的相对路径正确：

• 若CSS文件与图片同目录，用url('./image.svg')
• 若图片在上级目录的assets文件夹，用url('../assets/image.svg')

内容的提问来源于stack exchange，提问作者Hamdan Siddiqui