Mui Chip missing colorError in chipClasses.d.ts

[totszwai]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

tslint error when trying to styleOverrides on colorError, example

    MuiChip: {
      styleOverrides: {
        colorError: {
          backgroundColor: "rebeccapurple"
        }
      }
    }

Expected behavior 🤔

Be able to style the colorError as well as other supported CSS classes from Mui.

According to Mui's documentation, the color with value error (as well as other values) are supported

However, in the MuiChip's chipClasses.d.ts, only colorPrimary and colorSecondary were available.

Steps to reproduce 🕹

Go to this sandbox https://codesandbox.io/s/mui-chip-missing-colorerror-definition-n891uf The styleOverrides works but TypeScript is throwing error because the definition is not there.

Steps:

1. Create your custom Mui theme object
2. Perform styleOverride on Chip component, on color "Error" (or anything that's neither primary nor secondary)
3. Render a Chip
4. Observe the editor throwing error on colorError because it is not defined

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (16) x64 Intel(R) Xeon(R) Silver 4108 CPU @ 1.80GHz
    Memory: 2.18 GB / 15.33 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.19.2 - ~/.config/nvm/versions/node/v14.19.2/bin/node
    Yarn: 1.22.18 - ~/.config/nvm/versions/node/v14.19.2/bin/yarn
    npm: 6.14.17 - ~/.config/nvm/versions/node/v14.19.2/bin/npm
  Managers:
    Apt: 2.3.9 - /usr/bin/apt
    Maven: 3.6.3 - /usr/bin/mvn
    pip2: 20.3.4 - ~/.local/bin/pip2
    pip3: 20.3.4 - /usr/bin/pip3
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 11.2.0 - /usr/bin/gcc
    Git: 2.32.0 - /usr/bin/git
  Virtualization:
    Docker: 20.10.12 - /usr/bin/docker
  IDEs:
    Nano: 5.6.1 - /usr/bin/nano
    VSCode: 1.68.0 - /home/eto/.vscode-server/bin/4af164ea3a06f701fe3e89a2bcbb421d2026b68f/bin/remote-cli/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.8 - /usr/bin/bash
    Java: 1.8.0_312 - /usr/bin/javac
    Perl: 5.32.1 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.9.7 - /usr/bin/python3
  Browsers:
    Chrome: 102.0.5005.61
    Chromium: 102.0.5005.115
    Firefox: 101.0.1

[mnajdova]

@totszwai we can add it 👍 Would you like to prepare a PR for it? Note that you can always use:

    MuiChip: {
      styleOverrides: {
        root: ({ ownerState }) => {{
          ...(ownerState.color === 'error' && {
            backgroundColor: "rebeccapurple",
         })
        }
      }}
    }

We are likely going to be moving towards this approach in v6. Take a look at this codesandbox - https://codesandbox.io/s/mui-chip-missing-colorerror-definition-forked-ljwtch?file=/demo.tsx

[ricci2511]

@mnajdova if no one is working on it I could do it. Adding colorError to chipClasses.d.ts should be enough? I guess while I'm on it I could also add colorInfo, colorSuccess and colorWarning since according to the Chip API all those values are supported.

[totszwai]

Note: This issue may be applicable many other Mui components.

[mnajdova]

@mnajdova if no one is working on it I could do it. Adding colorError to chipClasses.d.ts should be enough? I guess while I'm on it I could also add colorInfo, colorSuccess and colorWarning since according to the Chip API all those values are supported.

We need to add all: colorError, colorInfo, colorWarning etc. This would be applicable to components that have these colors in the propTypes.color & generally support the color (for example have dynamic checks for applying colors).

[pratikkarad]

Hey, I would like to work on this issue if no one else is working on it. Thanks!

[propG]

Thanks, I'm new

[lindapaiste]

@mnajdova if no one is working on it I could do it. Adding colorError to chipClasses.d.ts should be enough? I guess while I'm on it I could also add colorInfo, colorSuccess and colorWarning since according to the Chip API all those values are supported.

We need to add all: colorError, colorInfo, colorWarning etc. This would be applicable to components that have these colors in the propTypes.color & generally support the color (for example have dynamic checks for applying colors).

Would it make sense to have a common interface ColorClasses which ChipClasses, IconButtonClasses, etc. can extend to reduce the repetition? Or is it more desirable to keep each component isolated?

[pratikkarad]

@mnajdova if no one is working on it I could do it. Adding colorError to chipClasses.d.ts should be enough? I guess while I'm on it I could also add colorInfo, colorSuccess and colorWarning since according to the Chip API all those values are supported.

We need to add all: colorError, colorInfo, colorWarning etc. This would be applicable to components that have these colors in the propTypes.color & generally support the color (for example have dynamic checks for applying colors).

Would it make sense to have a common interface ColorClasses which ChipClasses, IconButtonClasses, etc. can extend to reduce the repetition? Or is it more desirable to keep each component isolated?

In my opinion, keeping each component isolated would be the desirable way, as we have different color classes for different components. To take an example, we have colorPrimary, colorSecondary which are common color classes for most of the components like IconButtonClasses, ButtonClasses, AppBarClasses, and many more. But if we take a look at TabClasses, we don't have former color classes available in the corresponding component. The same goes for the other color classes like colorError, colorInfo, colorWarning, that all color classes are not available for a specific component at once.