如何移除React中Material UI Accordion组件的box shadow

问题原因 #

你写的sx选择器& .MuiPaper-root-MuiAccordion-root存在层级错误：.MuiPaper-root-MuiAccordion-root是Accordion组件自身的类名，而& .xxx表示匹配当前组件子元素中带有该类的节点，并非组件本身，所以样式无法生效。

正确解决方案 #

方案1：直接覆盖boxShadow（最简方式）

Accordion继承自Paper组件，可直接在sx属性中设置boxShadow: "none"来移除阴影：

<Accordion sx={{ boxShadow: "none" }}>
  <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
    <Typography>Accordion 1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>Lorem ipsum</Typography>
    <Typography>Lorem ipsum</Typography>
    <Typography>Lorem ipsum</Typography>
  </AccordionDetails>
</Accordion>

方案2：使用正确的类选择器

如果需要通过类名精准定位，要将&与类名连写（无空格），表示匹配当前组件自身的该类：

<Accordion sx={{ "&.MuiPaper-root-MuiAccordion-root": { boxShadow: "none" } }}>
  {/* 内部内容同上 */}
</Accordion>

方案3：全局修改所有Accordion

如果需要项目中所有Accordion都移除阴影，可通过自定义主题实现：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiAccordion: {
      styleOverrides: {
        root: {
          boxShadow: 'none',
        },
      },
    },
  },
});

// 在根组件或需要的区域包裹ThemeProvider
<ThemeProvider theme={theme}>
  <Accordion>
    {/* 内部内容同上 */}
  </Accordion>
</ThemeProvider>

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