Tengo el componente Select y MenuItems dentro y quiero eliminar o anular el color de fondo del componente Select enfocado y MenuItem seleccionado.

El elemento de menú seleccionado tiene este color de fondo:

enter image description here

Y después de seleccionar el elemento, el componente Seleccionar tiene un enfoque que se ve así:

enter image description here

Aquí está mi componente Select y MenuItem dentro de él:

<Select
    classes={{ focused: classes.selected }}
>
    <MenuItem
        classes={{ selected: classes.selected }}
    >
        Never
    </MenuItem>
</Select>

Y solo intenté anular el color de fondo para que sea el mismo que normalmente:

focused: {
    backgroundColor: "#fff",
},

selected: {
    backgroundColor: "#fff",
},

¿Algún consejo sobre cómo eliminar o anular esos colores de fondo? El componente de selección no tiene que mantener su enfoque después de seleccionar la opción.

EDITAR: Descubrí dónde aparece enfocado y estoy bastante seguro de que necesito orientarlo a través de inputProps, pero no sé cómo:

enter image description here

0
Arttu 22 ene. 2021 a las 14:48

1 respuesta

La mejor respuesta

Para cambiar el bg del componente Select enfocado, apunte a la clase root usando classes prop y agregue :hover estilos.

<Select classes={{ root: classes.selectRoot }}>
{... menuitems}
</Select>
const useStyles = makeStyles((theme) => ({
  selectRoot: {
  //...other styles
    '&:focus':{
      backgroundColor:'yellow'
    }
  }
}));

Y para cambiar el bg del MenuItem seleccionado, es necesario hacer algo similar. Para este objetivo, las clases selected y root de MenuItem.

<MenuItem
  classes={{ selected: classes.selected, root: classes.rootMenuItem }}
  value={"1"}>
  Never
</MenuItem>
const useStyles = makeStyles((theme) => ({
  selected: {
  },
  rootMenuItem: {
    "&$selected": {
      backgroundColor: "red",
        "&:hover": {
          backgroundColor: "green"
         }
      },
    '&:hover':{
      backgroundColor:'blue'
    }
  }
}));

Otra forma de diseñar MenuItem : -
No es preferible dar las clases classes={{ selected: classes.selected, root: classes.rootMenuItem }} a cada ListItem, aumentará la repetición del código y también violenta algunas reglas de código limpio (si se siguen). Entonces, para superar esto, cree un listItem personalizado usando withStyles.

const CustomMenuItem = withStyles((theme) =>createStyles({
  root:{
        "&$selected": {
            backgroundColor: "red",
            "&:hover": {
                backgroundColor: "green"
            }
    },
    '&:hover':{
      backgroundColor:'blue'
    }
  },
  selected:{
    
  }
})
)(MenuItem);

Ahora use este CustomMenuItem en lugar de ListItem.

<Select classes={{ root: classes.selectRoot }}>
  <CustomMenuItem value={"1"}>Never1</CustomMenuItem>
  <CustomMenuItem value={"2"}>Never2</CustomMenuItem>
  <CustomMenuItem value={"3"}>Never3</CustomMenuItem>
</Select>

Nota: - He agregado colores de fondo aleatorios aquí.

Demostración de trabajo: -
Editar hoja-oculta-63jme

1
Rajiv 22 ene. 2021 a las 13:53