En Material-UI v5, algunos usos de la API se importan desde @mui/material/styles , como useTheme . Y algunos usos de la API se importan desde @mui/styles , como makeStyles . ¿Puedo usar esas API relacionadas con el estilo de una sola biblioteca, ya sea @mui/styles o @mui/material/styles ? Porque, en Material-UI v4, importé todas las API relacionadas con el estilo de '@material-ui/core/styles' o 'material-ui/styles' .
Normalmente, en v4, importaría la API de estilo desde @material-ui/core/styles . Este usa JSS detrás de escena:
import { makeStyles } from '@material-ui/core/styles';En v5, cambiaron el nombre de la marca a MUI . Como resultado, el nombre del paquete también cambió:
import { makeStyles } from '@mui/material/styles'; Pero MUI v5 también elimina el soporte para JSS (que están usando makeStyles / withStyles ), por lo que mueven esas API a un paquete heredado llamado @mui/styles . (Planean eliminar esta API en v6, pero hay algunos retrocesos. Consulte este problema para obtener más información)
import { makeStyles } from '@mui/styles'; Y aliente a los usuarios a adoptar una solución de estilo más nueva ( sx , styled ) utilizando la emoción como motor de estilo predeterminado:
import { styled } from "@mui/material/styles"; Entonces, en resumen, la diferencia entre @mui/material/styles y @mui/styles es que:
@mui/styles | @mui/material/styles |
|---|---|
No viene con un tema predeterminado, necesita createTheme / ThemeProvider | Viene con un tema de material predeterminado (a diferencia del otro tema planificado) |
| Paquete de estilo heredado | Depende del nuevo paquete @mui/system |
| Desarrollado por JSS | Impulsado por la emoción (como motor de estilo predeterminado) |
Tiene makeStyles / withStyles | No tiene makeStyles / withStyles , tiene styled en su lugar |
No debe mezclar @mui/styles con @mui/material/styles . Elija una solución de estilo y apéguese a ella porque los nombres de clase duplicados de diferentes bibliotecas de estilos pueden provocar efectos secundarios inesperados y errores difíciles de encontrar. Si está creando un nuevo proyecto o tiene un pequeño proyecto v4, le recomiendo migrar completamente a la solución de emoción para evitar agregar un tamaño de paquete adicional porque el componente MUI usa emoción, ya no JSS en la nueva versión.