How can I remove the border of expansion panel area in Material-UI?
How can I remove the border of expansion panel area in Material-UI?
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;
}
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>