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][Slider] Error when passing different than primary and secondary colors #38945

Closed
2 tasks done
Heet-Bhalodiya opened this issue Sep 13, 2023 · 4 comments · Fixed by #39058
Closed
2 tasks done
Assignees
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material typescript

Comments

@Heet-Bhalodiya
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/quizzical-wiles-25378f

Current behavior 😯

The color slider component support only two colors which is primary and secondary but if I pass any other color like error or success, the slider's color gets updated but it gives a type error.

I am getting the following type error:

Type '"success"' is not assignable to type 'OverridableStringUnion<"primary" | "secondary", SliderPropsColorOverrides>'.
The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & SliderOwnProps & CommonProps & Omit<any, "className" | ... 30 more ... | "valueLabelFormat">'

Expected behavior 🤔

The slider component should support all the colors (error, warning, success, info) without giving any type errors.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo
  System:
    OS: macOS 13.2.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.10.8 => 11.10.8 
    @emotion/styled: ^11.10.8 => 11.10.8 
    @mui/base:  5.0.0-alpha.127 
    @mui/core-downloads-tracker:  5.12.2 
    @mui/lab: ^5.0.0-alpha.128 => 5.0.0-alpha.128 
    @mui/material: ^5.12.2 => 5.12.2 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system: ^5.12.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @mui/x-data-grid: 6.0.3 => 6.0.3 
    @types/react: ^18.2.0 => 18.2.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.4 => 5.0.4 
@Heet-Bhalodiya Heet-Bhalodiya added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 13, 2023
@zannager zannager added the component: slider This is the name of the generic UI component, not the React module! label Sep 13, 2023
@zannager zannager assigned mj12albert and unassigned mnajdova Sep 13, 2023
@danilo-leal danilo-leal changed the title Slider color [material-ui][Slider] Error when passing different than primary and secondary colors Sep 13, 2023
@danilo-leal danilo-leal added the package: material-ui Specific to @mui/material label Sep 13, 2023
@gugudwt
Copy link
Contributor

gugudwt commented Sep 16, 2023

I don't see errors in the example link and I correctly see the success color

image

@Heet-Bhalodiya
Copy link
Author

Hi @gugudwt,

I am getting the following type error when using any color other than primary and secondary.

image

@gugudwt
Copy link
Contributor

gugudwt commented Sep 19, 2023

Heet-Bhalodiya i made the pr, waiting for approve/reject.

@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work typescript and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 26, 2023
@umar-khan25
Copy link

Getting this error while using the MUI slider component. I'd use "?. operator" in node_module to fix it but it can't be pushed to git hub.
image (3)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants