[Badge] TypeScript error when adding style overrides for Badge colors

[alexplumb]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I attempt to override the colorInfo class of the Badge component, I receive the following Typescript error:

Type '{ colorInfo: { backgroundColor: string; }; }' is not assignable to type 'Partial<OverridesStyleRules<keyof BadgeClasses, "MuiBadge", BaseTheme>>'. Object literal may only specify known properties, and 'colorInfo' does not exist in type 'Partial<OverridesStyleRules<keyof BadgeClasses, "MuiBadge", BaseTheme>>'.

When I look at the source code for the BadgeClasses type, I can see that none of the color classes exist: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Badge/badgeClasses.ts#L4

Expected behavior 🤔

I should be able to override any of the CSS classes listed in the Badge documentation https://mui.com/material-ui/api/badge/#css

Steps to reproduce 🕹

The following style override results in a Typescript error:

MuiBadge: {
    styleOverrides: {
        colorInfo: {
          backgroundColor: palette.info.dark,
        },
    },
},

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz Memory: 5.53 GB / 15.82 GB Binaries: Node: 16.8.0 - C:\Program Files\nodejs\node.EXE npm: 8.7.0 - C:\Program Files\nodejs\npm.CMD Utilities: Git: 2.30.1. FFmpeg: 4.2.3 - C:\Program Files\ImageMagick-7.0.11-Q16-HDRI\ffmpeg.EXE Virtualization: Docker: 20.10.5 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE SDKs: Windows SDK: AllowAllTrustedApps: Disabled Versions: 10.0.19041.0 IDEs: VSCode: 1.67.0 - C:\Users\boney\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD Databases: SQLite: 3.32.2 - C:\Program Files\platform-tools\sqlite3.EXE Browsers: Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39) Internet Explorer: 11.0.19041.1566

tsconfig

{
"compilerOptions": {
"lib": ["es6", "es2015.promise", "es2015.generator", "es2017", "scripthost", "DOM"],
"module": "commonjs",
"target": "es2020",
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"allowUmdGlobalAccess": true,
"outDir": "public",
"sourceMap": true,
"removeComments": true,
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"noLib": false,
"allowJs": true,
"jsx": "preserve",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"typeRoots": [
"node_modules/@types",
"node_modules/@firebase/firestore-types"
],
"baseUrl": ".",
"paths": {
"@sda/": ["@sda/"],
"@client/": ["@client/"]
}
},
"include": [
"./.ts",
"@SDA",
"@client",
"client",
"config",
"functions/**/.ts",
"microservices/**/.*ts",
],
"exclude": [
"samples",
"./public",
"assets",
]
}

[alexplumb]

This is something I'm running into with other components as well (e.g. startIcon as a styleOverride of Button) - is there a recommended solution that I'm missing from the documentation?

[ZeeshanTamboli]

@alexplumb It's a bug in Badge component CSS classes type as you pointed. Regression since @mui/material: v5.6.0 due to changes in #31974

---

This is something I'm running into with other components as well (e.g. startIcon as a styleOverride of Button)

startIcon as a styleOverride of Button works fine for me. Check the following CodeSandbox: https://codesandbox.io/s/globalthemeoverride-material-demo-forked-l0j0ig?file=/demo.tsx