How would you go about implementing this in react?-CodePudding

I have something like this. I assume it's an accordion. Everything works great, but that damn black line is confusing the hell out of me. How is it that it still remains there, even when the accordion is closed.

This needs to be implemented in React, with MaterialUI.

How could I go about this?

What I have tried so far is this:

<div>
      <Accordion elevation={0} disableGutters={true} >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >

          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        
        <div style={{ border: '1px solid black' }}></div>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>

The above code works almost great, but when I close the accordion the black line closes with it

CodePudding user response：

You can add the bottom border using sx prop inside Accordion. Then you dont need to create separate Div for border.

...
<Accordion
 elevation={0}
 disableGutters={true}
  sx={{
    '.MuiAccordionSummary-root':{
      borderBottom:'1px solid black',
    },
  }}
>
...