CircularProgress 'color' type doesn't match the documentation

[developenguin]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/nifty-hoover-3ixz2b

Steps:

1. Use the CircularProgress component
2. Either by global overrides, or by using props, assign a color by using a string. E.g. '#ff0000'

Current behavior 😯

A type error this thrown: Type '"#ff0000"' is not assignable to type '"primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit"'.

Expected behavior 🤔

Based on the documentation at https://mui.com/material-ui/api/circular-progress/, I expect that you can use a string to change the color of the loader.

Context 🔦

I'm trying to assign a custom color to the loading indicator using the defaultProps option in the global overrides.

Your environment 🌎

npx @mui/envinfo

``` System: OS: Linux 5.19 Linux Mint 21.1 (Vera) Binaries: Node: 18.12.1 - ~/n/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.19.2 - ~/n/bin/npm Browsers: Chrome: Not Found Firefox: 109.0b4 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.114 @mui/core-downloads-tracker: 5.11.5 @mui/icons-material: ^5.10.14 => 5.11.0 @mui/material: ^5.11.5 => 5.11.5 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.5 @mui/types: 7.2.3 @mui/utils: 5.11.2 @mui/x-data-grid: 5.17.20 @mui/x-data-grid-pro: ^5.17.20 => 5.17.20 @mui/x-license-pro: 5.17.12 @types/react: 18.0.27 => 18.0.27 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.9.4 => 4.9.4 ```

tsconfig.json

``` { "compilerOptions": { "baseUrl": ".", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } ```

[developenguin]

At this point I don't know which is correct: the documentation or the code. The type in CircularProgress.d.ts is color?: OverridableStringUnion< 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', CircularProgressPropsColorOverrides>; which suggests that there are possibilities for overrides, but not just by supplying a string as the docs mention.

[ZeeshanTamboli]

In the API documentation, it says that the color prop supports custom theme colors, which means it does not accept any arbitrary string value. It also links to the documentation at https://mui.com/material-ui/customization/palette/#adding-new-colors. For TypeScript, you need to use module augmentation, for TypeScript to detect the custom prop value in the type.

If you need to provide a string, you can do so by using the sx prop and passing the hex value to color.

Here is the CodeSandbox demonstrating the same: https://codesandbox.io/s/friendly-allen-5xiiy4?file=/src/App.tsx.

[developenguin]

Ah, then I've misunderstood that line. Thanks for clearing that up :)

[M-Ali-Haider]

How can I change the progress color of "determinate" CircularProgress?? let's say i wanna use a gradient linear-gradient(90.92deg, #84E4FF -0.02%, #89A0FF 99.98%);