'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 1:[1]

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

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

Thanks!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rafael Schettino