Migré de Mui 4 a 5 y me pregunto cómo usar los nombres de las clases. Si quiero aplicar ciertos estilos a un solo componente, existe la propiedad SX. Sin embargo, tengo problemas para usar la misma clase para múltiples componentes. En v4 mi código se veía así:
export const useStyles = makeStyles((theme: Theme) => createStyles({ root: { padding: theme.spacing(1), margin: 'auto', }, }) ) Podría importar este gancho useStyles en cualquier componente y usarlo así:
const classes = useStyles() ... <div className={classes.root}>...</div>Estos documentos dicen que puedo 'anular estilos con nombres de clase', pero no dicen cómo hacerlo: https://mui.com/customization/how-to-customize/#overriding-styles-with-class -nombres
¿Tengo que poner estos estilos en un archivo CSS externo?
.Button { color: black; }Prefiero definir los estilos en mi archivo ts.
También encontré esta guía de migración: https://next.material-ui.com/guides/migration-v4/#migrate-makestyles-to-emotion
No me gusta el enfoque uno, porque al usar este envoltorio Root, es inconveniente aplicar una clase condicionalmente. (Especialmente para texto mecanografiado, hay algunos gastos generales) El enfoque dos viene con una dependencia externa y un código repetitivo.
Idealmente, usaría estilos como este, quizás con una función de rapero alrededor del objeto de estilos:
export const root = { padding: theme.spacing(1), margin: 'auto', } <div className={root}>...</div>Por supuesto, el último enfoque no funciona, porque className quiere una cadena como entrada. ¿Alguien sabe una alternativa con poco código repetitivo?
Le sugiero que eche un vistazo a la documentación de la emoción para obtener más detalles. El apoyo sx en realidad se pasa a la emoción.
Puedes hacer algo como esto:
const sx = { "& .MuiDrawer-paper": { width: drawerWidth } }; <Drawer sx={sx}/>Equivalente a MUI v4
const useStyles = makeStyles({ drawerPaper: { width: drawerWidth, } }); const classes = useStyles(); <Drawer classes={{ paper: classes.drawerPaper, }} />Estoy en el mismo barco, con un atraso de unos seis meses, es decir, comenzando a hacer la transición a v5 desde v4 ahora... ¡Justo cuando pensaba que lo dominaba todo!
Después de leer esta publicación y probar algunas cosas, pude replicar la capacidad de reutilizar una parte de CSS. Soy un gran admirador de lo que solía ser el accesorio de overrides ; esa característica no ha desaparecido, está justo debajo de un accesorio diferente (en términos generales). Independientemente, lo menciono porque brinda acceso a lo que me gusta mucho de css: los selectores.
Para acceder a todos los MUI-Drawers mi preferencia es cualquiera que sea la nueva overrides . Para la reutilización dirigida de css , me gusta lo siguiente:
import { reuseThisCss } from 'sharedCss`; export default styled(Drawer)(({ theme, ownerState }) => { ... return { '& .MuiDrawer-paper': { boxShadow: xxl, border: 'none', '& .MuiListItemText-root': reuseThisCss, }, }; export default ThisSpecificDrawerVariant; Nota: El enfoque no está en usar styled (no es mi enfoque goto).
El css en el valor return es el equivalente al siguiente css: .MuiDrawer-paper .MuiListItemText-root {...} .
Esto dice, "seleccione todo .MuiListItemText-root bajo el padre .MuiDrawer-paper . Si quiero optimizar el renderizado, mientras aumento la dependencia de una jerarquía específica, especificaré/expandiré en el selector mucho más con cualquier mentira entre .MuiDrawer-paper y MuiListItemText-root ejemplo, en mi caso:
... return { '& .MuiDrawer-paper': { boxShadow: xxl, border: 'none', '& > a > li > div > .MuiListItemText-root': reuseThisCss, }, }; Finalmente, según una pregunta en los comentarios, generalmente esto no evitará una aplicación anidada del estilo. En mi experiencia, es útil marcar cada nivel con un nombre de className . Solo "marco" el elemento que señala el comienzo de un nuevo nivel. Entonces, si fuera Drawer en el ejemplo anterior, iniciaría el selector css con .MUI-Drawer.level-3 . El resto de css sigue siendo el mismo.
Todavía no he averiguado si la configuración de className dinámicamente sigue siendo un goto lo suficientemente flexible y eficiente ... TBD.