Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
awr opened this issue Apr 17, 2024 · 4 comments
Open
Assignees
Labels
component: switch This is the name of the generic UI component, not the React module! status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@awr
Copy link

awr commented Apr 17, 2024

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',
    },
  },
});
  1. Add Switch component to your page as below
<ThemeProvider theme={theme}>
  <Switch color="primary" checked={true} />
</ThemeProvider>
  1. 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

@awr awr added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 17, 2024
@zannager zannager added the component: switch This is the name of the generic UI component, not the React module! label Apr 17, 2024
@yassinmars
Copy link

yassinmars commented Apr 17, 2024

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
Copy link
Member

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

@mnajdova mnajdova self-assigned this Apr 18, 2024
@mnajdova mnajdova added status: waiting for author Issue with insufficient information status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 18, 2024
@ignapas
Copy link

ignapas commented Apr 24, 2024

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
Copy link
Author

awr commented Apr 24, 2024

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.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Apr 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: switch This is the name of the generic UI component, not the React module! status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

6 participants