How can I remove the border of expansion panel in Material-UI?

Viewed 11261

How can I remove the border of expansion panel area in Material-UI?

6 Answers

This works for version "@material-ui/core": "4.9.9"

You can use the following to be applied for the entire theme:

const theme = createMuiTheme({
  overrides: {
    MuiExpansionPanel: {
      root: {
        '&:before': {
          display: 'none'
        },
      },
    },
  }
}

Or if you need it only for one component then can be hidden through a class style:

import { makeStyles } from '@material-ui/core/styles'

....
const useStyles = makeStyles({
  hideBorder: {
    '&.MuiExpansionPanel-root:before': {
      display: 'none',
    },
  },
})

....
const classes = useStyles()

.....
<ExpansionPanel className={classes.hideBorder}>

You should be able to set the elevation to 0 which will remove the box-shadow:

<Accordion elevation={0}>

(note: ExpansionPanel has been renamed to Accordion)

Try to edit the css of the expansion-panel class (I guess you mean the box shadow, there is no border)

.expansion-panel {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

enter image description here

This works for @mui/material 5.1.0:

MuiAccordion: {
 styleOverrides: {
  root: {
    "&:before": {
      backgroundColor: "transparent",
    },
  },
 },
},

This is worked for me @mui/material: ^5.8.7

I create style like this

const AccordionStyle = {
  '&:before': {
    backgroundColor: 'transparent !important',
  },
};

and I used the style in sx

<Accordion sx={AccordionStyle}>
</Accordion>
Related