Estoy tratando de diseñar el control deslizante MUI, así que decidí diseñarlo usando el accesorio className. Pero el estilo aplicado a la clase principal no se aplica, mientras que se aplican otros estilos como el estado 'hover'. Si elimino todas las clases y simplemente le doy estilo usando SX prop, todo funciona bien. Pero quiero mantener los estilos separados en un archivo css externo.
A continuación se muestra mi código:
aplicación.css
.container{ margin-left: 30%; margin-top: 20%; } /* This does'nt get applied */ .slider { color: #ff0000; width: 300px; } .slider:hover { color: #2e8b57; } .slider > .MuiSlider-thumb { border-radius: 1px; }Aplicación.js
import "./App.css" import * as React from 'react'; import Slider from '@mui/material/Slider'; export default function App() { return ( <div className="container"> <Slider className="slider" defaultValue={30} /> </div> ); }El problema es con el orden de inyección del estilo Material UI. Los estilos personalizados se aplican, pero los estilos Mui se inyectan antes que el estilo personalizado, por lo que no tienen efecto en este caso.
Esta guía explica cómo cambiar el orden de inyección:
https://mui.com/guides/interoperability/#css-injection-order
No sé si es necesario, pero uso módulos css y material-ui. Puede cambiar el nombre de su archivo css a
Aplicación.módulo.css
luego importar así
import styles from "./App.module.css"entonces puedes usarlo como
<Slider className={styles.slider} defaultValue={30} />En Nextjs puedes lanzar todo en styles.css para hacerlo global, pero no sé si eso también es para reaccionar.