How can I remove line above the accordion of Material UI?

user_2998555 0
Viewed 7710

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

material-ui reactjs
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' }}
user_130975470

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.

user_138970650

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.

user_122815390 
// 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}
>
user_35681690 
 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;
user_181795970

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.

user_28811550
Related