[AppBar][material-ui] Type error for color property with "error", "warning" and "success" values

[BreakBB]

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/inspiring-edison-3ffqdm?file=/src/App.tsx

In the example above Typescript complains about the color attribute having a value different to:

'default' | 'inherit' | 'primary' | 'secondary' | 'transparent'

Even though the AppBar color docs also list | string as possible value for the color property.

Current behavior 😯

The application is colored as expected, but Typescript complains about it.

Expected behavior 🤔

I expect the color property to fulfill the | string type and allow at least "error", "warning" and "success" as valid values for it.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 18.17.1 - ~/.n/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.n/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.5.2
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.15
    @mui/core-downloads-tracker:  5.14.9
    @mui/icons-material: 5.14.9 => 5.14.9
    @mui/material: 5.14.9 => 5.14.9
    @mui/private-theming:  5.14.9
    @mui/styled-engine:  5.14.9
    @mui/system:  5.14.9
    @mui/types:  7.2.4
    @mui/utils:  5.14.9
    @types/react: 18.2.21 => 18.2.21
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.2.2 => 5.2.2

[ttlpta]

@BreakBB You can workaround by declare interface AppBarPropsColorOverrides

[BreakBB]

Thanks @ttlpta that is something for the meantime and better than @ts-ignore 😅 👍🏻

[ttlpta]

@BreakBB It seems this is the official solution to add customized color to any component https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

[BreakBB]

@BreakBB It seems this is the official solution to add customized color to any component https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

Well yeah for any custom colors I am totally fine with this method. But in my opinion the error, warning and success colors should be valid color options by default. I might be wrong, but hence this issue.

[ZeeshanTamboli]

@BreakBB Thanks for reporting the bug. It's a straightforward fix. Would you like to create a PR? You can follow the approach used in #39058, which addressed a similar issue with the Slider's color prop.

[BreakBB]

@BreakBB Thanks for reporting the bug. It's a straightforward fix. Would you like to create a PR? You can follow the approach used in #39058, which addressed a similar issue with the Slider's color prop.

Yes, absolutely. Thanks for the guiding the way with the PR you linked 👍🏻