[Typography] types cannot be a callback for color prop #43589
Description
Steps to reproduce
Links to live example:
- link to version 5.x without ts error: https://stackblitz.com/edit/vitejs-vite-svnirn?file=src%2FApp.tsx&terminal=dev
- link to version 6.x with ts error: https://stackblitz.com/edit/vitejs-vite-svnirn?file=src%2FApp.tsx
Steps:
Just use Typography component like this:
<Typography
color={(theme) => theme.palette.error.main}
>
h1. Heading
</Typography>
Since 6.0.0 version, although the code itself works and the color is applied - TS display 2 errors for this implementation:
No overload matches this call.
Overload 1 of 2, '(props: { component: ElementType<any, keyof IntrinsicElements>; } & TypographyOwnProps & CommonProps & Omit<any, "children" | ... 112 more ... | "variantMapping">): Element | null', gave the following error.
Type '(theme: any) => any' is not assignable to type '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "success" | "error" | "info" | "warning" | "textLink" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides> | undefined'.
Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element | null', gave the following error.
Type '(theme: any) => any' is not assignable to type '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "success" | "error" | "info" | "warning" | "textLink" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides> | undefined'.
Parameter 'theme' implicitly has an 'any' type.
From reading the declarations files, it seems that you changed the type of color prop.
This is the type in version 5.x:
(property) color?: ResponsiveStyleValue<Property.Color | readonly string[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties["color"]>)
And this is the type in version 6.x:
(property) TypographyOwnProps.color?: (string & {}) | OverridableStringUnion<"primary" | "secondary" | "success" | "error" | "info" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides> | undefined
Current behavior
No response
Expected behavior
No response
Context
No response
Your environment
npx @mui/envinfo
System:
OS: Linux 5.0 undefined
Binaries:
Node: 18.20.3 - /usr/local/bin/node
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: latest
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.0.2
@mui/material: ^6.0.1 => 6.0.2
@mui/private-theming: 6.0.2
@mui/styled-engine: 6.0.2
@mui/system: 6.0.2
@mui/types: 7.2.16
@mui/utils: 6.0.2
@types/react: ^18.3.5 => 18.3.5
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.5.3 => 5.5.4
tsconfig
{
"compilerOptions": {
"jsx": "react-jsx",
"useDefineForClassFields": true,
"lib": ["ES2021", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"module": "ESNext",
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["dist", "node_modules"]
}
Search keywords: Typography, color prop, typescipt, ts, error