• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

609
Vistas
Mui v5 styleOverrides no funciona con temas

Estoy tratando de diseñar usando anulaciones de temas como se establece en la documentación aquí :

Tengo el siguiente código sandbox :

 import * as React from 'react'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import Select from '@mui/material/Select' import MenuItem from '@mui/material/MenuItem' const theme = createTheme({ components: { MuiSelect: { styleOverrides: { root: { background: '#000', }, }, }, }, }); export default function GlobalThemeOverride() { return ( <ThemeProvider theme={theme}> <Select labelId="demo-simple-select-label" id="demo-simple-select" variant="standard" > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </ThemeProvider> ); }

El cuadro Seleccionar debe tener un fondo de #fff sin embargo, no se establece ningún fondo. :(

about 3 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Esto me parece un error (o al menos falta una característica que es razonable que los desarrolladores esperen que esté allí). El problema es que Select no define ningún estilo propio en el nivel raíz, por lo que no aprovecha el código (que sería una llamada al styled de MUI como aquí para la clase de select ) que se encargaría de buscar en el tema y aplicando las anulaciones de estilo correspondientes. Recomiendo registrar un problema.

Hay un par de posibles soluciones.

Solución alternativa 1: apunte a la clase CSS select

Este enfoque puede funcionar, pero depende de lo que intente hacer, ya que se dirige a un elemento secundario del elemento raíz.

 const theme = createTheme({ components: { MuiSelect: { styleOverrides: { select: { backgroundColor: "#000", color: "#fff" } } } } });

Editar demostración de GlobalThemeOverride Material (bifurcado)

Solución alternativa 2: apunte a la clase CSS MuiInput-root

El siguiente enfoque tiene como objetivo el mismo elemento que MuiSelect-root aprovechando MuiInput-root (la representación del elemento raíz de Select se delega al componente Input cuando la variante es "estándar") y luego lo califica a través "&.MuiSelect-root" para que solo afecte a Select en lugar de a todas las entradas.

 const theme = createTheme({ components: { MuiInput: { styleOverrides: { root: { "&.MuiSelect-root": { backgroundColor: "#000", color: "#fff" } } } } } });

Editar demostración de GlobalThemeOverride Material (bifurcado)

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda