[Typography] types cannot be a callback for color prop

[elnatanitzan]

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

[mnajdova]

This breaking change was mentioned in https://mui.com/material-ui/migration/migrating-from-deprecated-apis/#system-props, but maybe we should expand a bit on it. The idea is that you can use the sx prop to get the previous behavior of the Typography. The new color prop allows you to just use a specific value from a discrete set of values. So the suggestion would be to:

1. migrate to sx prop if you need a theme callback or need some dynamic color
2. use some of the colors directly available

I hope the explanation help. @siriwatknp to consider if we should improve a bit the migration guide on this one.

[elnatanitzan]

@mnajdova Thanks for the quick reply 🙂

[siriwatknp]

I hope the explanation help. @siriwatknp to consider if we should improve a bit the migration guide on this one.

Thanks @mnajdova, will do.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @elnatanitzan! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!