0
184
VistasCómo acceder a la propiedad Material ui Expanded en el Panel de expansión
Como se muestra en la siguiente imagen:
Necesitaba hacer que el panel de expansión (solo la parte de expansión, cuando la expansión estaba activa) ocupara el 100% de la Div que ocupa actualmente. That height: 100% hace el trabajo, pero dentro de mi estilo, no puedo acceder a esa propiedad correctamente.
Fragmento de código de mi panel de expansión:
<ExpansionPanel classes={{ root: classes.expanded }}Mi estilo:
expanded: { '&$expanded': { height: '100%' }, margin: '0 !important', boxShadow: 'none', borderRadius: 0, '&::before': { content: 'none' } }Pero al renderizar mi estilo, da como resultado la siguiente imagen:
No aplica el estilo al .MuiExpansionPanel-root.Mui-expanded , sino que aumenta el tamaño del cuadro cuando no está expandido.
Gracias por adelantado.
1 Respuestas
Responde la pregunta0
consulte los documentos de la API de MatUI en la sección css y los nombres de las reglas. esas son las claves que debe proporcionar a la clase prop. Está configurando su nombre de clase expandido en la root , debe configurarlo en expanded
EDITAR basado en código sandbox
este
expandedPanel: { "&$expanded": { height: "100%" } }es equivalente al css
.expandedPanel.expanded{}Sin embargo, MatUI ya está aplicando condicionalmente la clase de panel expandido y todavía no hay otra clase .expandida, por lo que falla. no necesita hacer la verificación &$expandida usted mismo. Solo hay que cambiarlo a
expandedPanel: { height: "100%" }