Theme palette action selected color is not working in MUI version 5

[bbarnell]

When creating a custom theme, the palette.action.select color property is not working. The other action color properties are working great.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The select color on a dropdown select component is not working.

The default theme color is used instead.

Expected Behavior 🤔

The color on a selected dropdown menu item should be set.

Steps to Reproduce 🕹

See this code sample:
https://codesandbox.io/s/palette-select-demo2-6ql8p?file=/src/Demo.tsx

import * as React from "react";
import { Box,InputLabel, MenuItem, FormControl, Select } from "@material-ui/core";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { red } from "@mui/material/colors";

const theme = createTheme({
  palette: {
    action: {
      select: red[500],
    },
  },
});

export default function Demo() {
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
    </ThemeProvider>
  );
}

Your Environment 🌎

Edge and Chrome browsers on Windows 10.

[mnajdova]

Thanks for the report. The action is called selected not select. From what I can see the MenuItem uses the primary color with the selectedOpacity this is why it is not set. You would need to change either the primary color if that makes sense for your app, or apply an override for this specific component.

For more background on the change, take a look on #21930

[bbarnell]

@mnajdova So are you saying that I can't just set the "selected" property? That does not work in the sample provided. It used to work in MUI version 4. All of the other action items work in V5 except for selected!

[mnajdova]

@bbarnell we are following the recommendation from MD autonomy (using the primary color with a bit of opacity for the selected state), see #5186 (comment)

[bbarnell]

Ok, I guess an override is my only option since the selected color is based on the theme primary color.

[ctbeiser]

This is clearly a regression. MUI should be usable for design systems other than material, including ones that use secondary colors on list items.

At a minimum, it's obviously wrong that there's an item that can be specfied (selected) that changes nothing at all about the appearance of the theme.

[mnajdova]

This is clearly a regression. MUI should be usable for design systems other than material, including ones that use secondary colors on list items.

You would need to do a style override if you want to use secondary colors on list items, but I would say this is less common than using the primary colors, this is why the primary color is the default behavior.

At a minimum, it's obviously wrong that there's an item that can be specfied (selected) that changes nothing at all about the appearance of the theme.

The change was done in order to bring consistency between the states styles across different components, in my opinion this changes was going in the right direction, see #21930 The theme.palette.action.selected is still used in some places, but the theme.palette.action.selectedOpacity is used much more together with the primary color. Again, you are free to add overrides to fit your design system requirements.

[bryanlopez-ibotta]

I am trying to adjust theme.palette.action.selectedOpacity and theme.palette.action.hoverOpacity but it seems hit or miss... For example, it affects Buttons with variant secondary but not primary? It also seems to have different effects if I set the primary color in main versus light or dark. What is theme.vars

'&:hover': _extends({
  textDecoration: 'none',
  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
  // Reset on touch devices, it doesn't add specificity
  '@media (hover: none)': {
    backgroundColor: 'transparent'
  }
},