[material-ui][Switch] Unsupported color after upgrade @mui/material to 5.15.13

[awr]

Steps to reproduce

Link to live example: (https://stackblitz.com/edit/react-ceuj3r-aa3qzw?file=theme.ts)

Steps:

1. Update to MUI v.5.15.13 or 5.15.15
2. Use a theme provider with colors in 'r, g, b' format as below

export const theme = createTheme({
  palette: {
    primary: {
      main: '58, 53, 65',
      light: '58, 53, 65',
    },
  },
});

3. Add Switch component to your page as below

<ThemeProvider theme={theme}>
  <Switch color="primary" checked={true} />
</ThemeProvider>

4. Load the page in your browser

Current behavior

Gives me the error: MUI: Unsupported 58, 53, 65 color. The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

Expected behavior

Renders the color without error

Context

No response

Your environment

I couldn't get npx @mui/envinfo to work.

Tested with Chrome browser.

Search keywords: Switch, theme, palette, ThemeProvider

[yassinmars]

Hello, I followed the steps listed to reproduce the issue with the Switch component using MUI v.5.15.13 and v.5.15.15.

Environment: Chrome browser MUI version tested: 5.15.13 and 5.15.15

Steps Reproduced:

Updated to MUI v.5.15.13 and v.5.15.15. Implemented ThemeProvider using the specified RGB format for the primary color in the palette. Added the Switch component with color="primary" and checked={true}.

Outcome:

Received the error as reported: "MUI: Unsupported 58, 53, 65 color. The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()." This confirms that the issue persists as its described. It seems that MUI does not currently support plain RGB values without the rgb() function. It might be helpful to specify in the documentation that colors need to be provided in the rgb() or other supported formats.

[mnajdova]

The error is self-descriptive, what you are providing is not a valid color. Which version did this work with? I tried an older version (before v.15.13), and it still yields the same error: https://stackblitz.com/edit/react-ceuj3r-hci311?file=package.json

[ignapas]

Also got this after an update to 5.15.15 from 5.14.10 without changes in our application's code EDIT: It was due to an error on our side, of extending the theme's palette with a new color and not giving it a valid color as its value.

[awr]

Looking at my upgrade path, I was actually on 5.15.12 not 5.15.13 so it's possible it wasn't this commit.

I'm going to update my code to include a call to rgb() to make things work on my project. If that's the desired path forward, that'll work fine. But the behavior has certainly changed from previously -- that's all I was trying to point out.

If you don't want to support the old behavior, feel free to close this.

[TheProOfficial]

I have the same problem, and only with the Switch. I cannot change it to rgb(), as it will break all other components. I guess it's time to downgrade.

// Update:

After downgrading to 5.15.6 from 5.15.20, everything seems to work just fine.

[TheProOfficial]

In 5.16.0, the bug remains, I just decided to remove the Switch altogether since it seems they won't be fixing it.