I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
6 Answers
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx
prop.
The sx
prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={}
prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx
prop to <AccordionDetails/>
as well.
You must pass an object to sx
so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
-
I believe the
:before
pseudo-element was removed from Accordion in MUI v5.– ob-ivanMar 24, 2022 at 15:25
To make gray line white you have to override the css classes of Accordion
element.
The grey line comes from .MuiAccordion-root:before
style. So at first change Accordion
props adding classes
props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles
add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
-
3Thanks, this worked great for me! Small improvement suggestion: instead of making the background white (which still consumes 1px space), you can fully remove the line by setting
height: 0
Feb 16, 2021 at 19:31 -
1You can also use "&.MuiAccordion-root:before": { display: 'none' } so you totally get rid of it– AkisJul 7, 2022 at 20:45
-
You can also just wrap the Accordion in a div and it will go away. Sep 21, 2022 at 19:37
Try adding some css file and access this class MuiAccordion-root:before
and change it's height
to 0px. It's the pseudo-element
that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
-
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.– Community BotAug 3, 2022 at 23:20
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.