reactjsmaterial-ui

Material UI Select focus and selected background color


I have Select component and MenuItems inside it and I want to remove or override background color from focused Select component and selected MenuItem.

Selected MenuItem has this background color:

enter image description here

And after I select item Select component has focus which looks like this:

enter image description here

Here is my Select component and MenuItem inside it:

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

and I'm just tried to override background color to be same as normally:

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

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

Any tips how to remove or override those background colors? Select component doesn't have to keep it's focus after option is selected.

EDIT: Found out where focused appears and I'm pretty sure I need to target it via inputProps but don't know how:

enter image description here


Solution

  • to change the bg of the focused Select component target the root class using classes prop and add :hover styles.

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

    And for changing the bg of the selected MenuItem, something similar needs to be done. For this target the selected and root class of the 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'
        }
      }
    }));
    

    Another way of styling MenuItem:-
    Giving the classes classes={{ selected: classes.selected, root: classes.rootMenuItem }} to every ListItem is not preferable it'll increase the code repetition and also violets some clean code rules (if followed). So to overcome this create a custom listItem using withStyles.

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

    Now use this CustomMenuItem in place of ListItem.

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

    Note:- I've added random background colors here.

    Working demo:-
    Edit hidden-leaf-63jme