Through edge developer tools , I have adjusted below style -
I want .MuiAccordion-root.Mui-expanded to be with margin 2px. By default its 16px
So I written below style in react where I have used accordion -
createStyles({
root : {
"& .MuiAccordion-root.Mui-expanded":{
margin : "2px 0"
}
}
})
After setting this, when I refresh my page , I dont see this style has got applied. I again see default style with margin 16px.
How can I write style so that it could take margin 2px ?
Personnally I do it via a styles.module.scss file
import styles from './styles.module.scss';
<Accordion className={styles.accordion}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
.accordion {
:global(.Mui-expanded) {
margin: 2px 0;
}
}