Usamos acordeones para mostrar entidades editables y queremos bloquear las entidades modificadas en el estado expandido. Actualmente, nos vemos obligados a elevar el estado expanded a la envoltura de acordeón, prácticamente duplicando la funcionalidad integrada, para evitar la transición controlada <-> no controlada del componente Accordeon (lo cual está prohibido por MUI). Algo como esto:
const AccordionWrapper = ({isModified = false, ...otherProps}) => { const [expanded, setExpanded] = useState(isModified); return ( <Accordion expanded={expanded} onChange={(_, expanded) => { setExpanded(expanded || isModified); }} ...otherProps /> ); }¿Hay una mejor manera de lograrlo?
Alternativas que hemos considerado:
<Accordion disabled={isModified}> + estilos personalizados para hacer que el acordeón deshabilitado no parezca tan deshabilitado (grisáceo). Es un poco desalentador que exista la posibilidad (poco probable) de bloquear el componente en un estado colapsado porque no lo controlamos.expanded de . En este caso podríamos <Accorrdion expanded={isModified ? true : undefined}> . En realidad, no hay un problema técnico fuerte con dicha transición (especialmente cuando/si https://github.com/mui-org/material-ui/pull/29237 se fusiona)PD. Espero que los desarrolladores de MUI vean los puntos 2 y 3 aquí en SO, porque estas preguntas/sugerencias probablemente no sean un problema y no deberían estar en el rastreador de problemas de MUI.