Imagen para el entorno de desarrollo:

Imagen para host local:

Como se ve, jss6 css es lo que proviene de makeStyles-sidebar 6, pero en la versión implementada se aplica algo de css adicional con el mismo nombre que jss6

He vuelto a implementar el código muchas veces después de borrar el caché, pero el problema persiste

Este problema comenzó a ocurrir después de que la versión de Material-ui se actualizó de "@material-ui/core": "^4.11.0" a "@mui/core": "^5.0.0-alpha.53" y "@mui/ estilos": "^5.6.2",

Creo que hay un problema en makeStyles, pero ¿por qué sucede solo para un componente?

Implementación previa de crear tema

importar { createTheme } desde '@material-ui/core/styles';

Implementación más reciente del tema de creación

import { createTheme } from '@mui/material/styles';

implementación previa de estilos make:

importar {makeStyles} desde "@material-ui/core";

Implementación más nueva de estilos make:

importar {makeStyles} desde "@mui/styles";

Código:

 export const useStyles = makeStyles(() => { return ( { //one of the problems sidebar: { backgroundColor: "#39414D", whiteSpace: "no-wrap" }, sidebarItemContainer: { height: "70px", padding: "10px", display: "flex", alignItems: "center", justifyContent: "flex-start", cursor: "pointer" }, sidebarItemIcon: { paddingRight: "10px", color: "#99A6B6" }, sidebarItemText: { color: "#99A6B6" } } ) })