如何移除Material UI Accordion组件上方的默认灰色线条？

嘿，我来帮你搞定这个烦恼！你遇到的灰色线条其实是Material UI Accordion组件默认自带的分割线（通过:before伪元素实现），同时组件默认也有边框样式，咱们可以通过几种方式轻松移除它，还能确保背景是纯白色：

方法一：内联sx样式快速解决 #

直接在Accordion组件上用sx属性覆盖默认样式，适合单个组件的场景：

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';

export default function BasicAccordion() {
  return (
    <Accordion 
      sx={{ 
        backgroundColor: 'white', // 明确设置白色背景
        border: 'none', // 移除默认边框
        '&:before': {
          display: 'none' // 移除默认的伪元素分割线
        } 
      }}
    >
      <AccordionSummary aria-controls="panel1-content" id="panel1-header">
        <Typography>Accordion 1</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget.
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
}

方法二：用styled组件自定义可复用的Accordion #

如果你的项目里多个地方都要用到无线条的Accordion，用styled组件封装一下更方便：

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

// 自定义无线条的Accordion组件
const WhiteAccordion = styled(Accordion)(({ theme }) => ({
  backgroundColor: 'white',
  border: 'none',
  '&:before': {
    display: 'none',
  },
  // 还可以添加hover等状态的样式，比如hover时也不要边框
  '&:hover': {
    boxShadow: 'none',
  },
}));

// 使用的时候直接调用自定义组件
export default function CustomAccordionDemo() {
  return (
    <WhiteAccordion>
      <AccordionSummary aria-controls="panel2-content" id="panel2-header">
        <Typography>Custom Accordion</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
          这个Accordion已经去掉了上方的灰色线条，背景也是纯白色哦！
        </Typography>
      </AccordionDetails>
    </WhiteAccordion>
  );
}

方法三：修改全局主题（适合全项目统一配置） #

如果你希望整个项目的所有Accordion都默认去掉这条线条，直接修改Material UI的全局主题就可以：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';

// 创建自定义主题
const theme = createTheme({
  components: {
    MuiAccordion: {
      styleOverrides: {
        root: {
          backgroundColor: 'white',
          border: 'none',
          '&:before': {
            display: 'none',
          },
        },
      },
    },
  },
});

export default function ThemedAccordion() {
  return (
    <ThemeProvider theme={theme}>
      <Accordion>
        <AccordionSummary aria-controls="panel3-content" id="panel3-header">
          <Typography>Themed Accordion</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            现在项目里所有的Accordion都会默认是白色背景，没有上方的灰色线条啦！
          </Typography>
        </AccordionDetails>
      </Accordion>
    </ThemeProvider>
  );
}

以上三种方法都能解决你的问题，根据自己的使用场景选就行～

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