mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.72k stars 31.51k forks source link

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

Open awr opened 2 weeks ago

awr commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 week ago

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 commented 1 week ago

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.