13

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 6

17

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' }}
1
  • I believe the :before pseudo-element was removed from Accordion in MUI v5.
    – ob-ivan
    Mar 24, 2022 at 15:25
15

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.

3
  • 3
    Thanks, 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
  • 1
    You can also use "&.MuiAccordion-root:before": { display: 'none' } so you totally get rid of it
    – Akis
    Jul 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
3

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.

2
// 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}
>
0
 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;
1
  • 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 Bot
    Aug 3, 2022 at 23:20
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.