Estoy usando Material-UI para expandir mi proyecto React, pero no puedo cambiar las barras de desplazamiento en los componentes mui. Este era el css que estaba usando antes de la integración mui:

 ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background-color: transparent; border-radius: 5px; margin: 5px; } ::-webkit-scrollbar-thumb { background-color: #1a1b1c; border-radius: 5px; border: solid 2px #282c34; } ::-webkit-scrollbar-thumb:hover { background-color: #1a1b1c; border-radius: 5px; border: solid 2px #1a1b1c; }

Después de usar mui, me di cuenta de que css se sobrescribe con el propio estilo de mui al usar componentes mui como <Box/> o <Drawer/> . También estoy usando <ThemeProvider/> de mui con el siguiente tema:

 export const dark_theme = createTheme({ breakpoints: { values: { mobile: 0, desktop: 1024, }, }, palette: { type: "dark", primary: { main: "#3f51b5", contrastText: "#fff", }, secondary: { main: "#8700ff", contrastText: "#fff", }, background: { default: "#282c34", }, }, typography: { fontFamily: "Poppins", allVariants: { color: "white", }, }, overrides: {}, });

Después de probar las anulaciones de CSS Baseline de la documentación de mui, no pude obtener ningún resultado, pero tampoco pude confirmar cuál era el problema debido a mi comprensión limitada del estilo de mui y al hecho de que las barras de desplazamiento de CSS Baseline estaban marcadas como obsoletas.

¿Cómo puedo integrar los estilos de barra de desplazamiento css que se muestran arriba en un componente mui o un tema mui?