Material UI Select focus and selected background color

user_12158627 0
Viewed 10035

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

material-ui reactjs
2 Answers

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

user_112222820

After read your suggestion, I added :focus to the global theme in my App.js file, like that:

MuiSelect: {
  outlined: {
    '&:focus': {
      backgroundColor: '#FFF'
    }
  }
},

Thanks!

user_68273560
Related