A través de las herramientas de desarrollo de Edge, he ajustado el estilo a continuación:
Quiero .MuiAccordion-root.Mui-expanded para tener un margen de 2px . Por defecto es 16px Así que escribí debajo del estilo en reaccionar donde he usado acordeón -
createStyles({ root : { "& .MuiAccordion-root.Mui-expanded":{ margin : "2px 0" } } })Después de configurar esto, cuando actualizo mi página, no veo que se haya aplicado este estilo. Vuelvo a ver el estilo predeterminado con un margen de 16 px.
¿Cómo puedo escribir el estilo para que pueda tomar un margen de 2px?
Personalmente lo hago a través de un archivo styles.module.scss
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; } }