Skip to content

Variants not type safe anymore in createTheme #45275

Open
@maapteh

Description

@maapteh

Steps to reproduce

Steps:

  1. Open this playground https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYQuCA7AphmBnAGjgBUALLELIgYyiwEMYsyKs4BfOAMyjTgHIAAiACuwAPQhGWKMHoAbfgCgVWAB6RYcapjzx5wAOakYqdNlx44AXjgAKAJQAuEuUo2AfIiVxtu+DBubLa0DEwslHYIPr5+5jj4LtGxsQCyYgCC8jIwSTEpvnoAntkA8gBuMrIAJlh4eQUFvBC53o2N5fSy9JYuANr57SnJQ+1gvGD1iHCd3bgu-Ho91V3V1fwcBIOjscXZSXAARtC1UC4ADJvbo+xbO74Aunc3z423176zcr1wAzsjO3GEEmBy+PVaixgy1W6yu9zgeywB2OUFOFzhLw+cCe13eKXYMXYDhUvjoMBEUAwcECrCU7CAA
  2. Notice that old way of having variant is typesafe, and new way not

Current behavior

Im following this guide https://mui.com/material-ui/migration/migrating-from-deprecated-apis/#theme-component-variants
Where im moving the variants to the styleoverride in the root

But now the props are not typesafe anymore

It was typed as:

props: Partial<AlertProps> | ((props: Partial<AlertProps> & {
    ownerState: Partial<AlertProps>;

then i get this warning:

Type '"standardd"' is not assignable to type 'OverridableStringUnion<"filled" | "outlined" | "standard", AlertPropsVariantOverrides> | undefined'. Did you mean '"standard"'?

But in root variants are typed as:

props: (AlertProps & Record<string, unknown> & {
    ownerState: AlertProps & Record<string, unknown>;
} & {
    theme: Omit<Theme, "palette" | "components"> & CssVarsTheme;
}) | ((props: AlertProps & ... 2 more ... & {
    ...;
}) => boolean)

Notice the Record<string, unknown>

Now the invalid prop is not catched anymore.

Expected behavior

Having typesafety just like before

Context

No response

Your environment

  System:
    OS: macOS 15.1.1
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 8.14.3 - ~/Library/pnpm/pnpm
  Browsers:
    Safari: 18.1.1
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.5 => 11.11.5
    @mui/lab: 6.0.0-beta.23 => 6.0.0-beta.23
    @mui/material: 6.4.2 => 6.4.2
    @mui/system: 6.4.2 => 6.4.2
    @mui/utils: 6.4.2 => 6.4.2
    @mui/x-data-grid: 7.23.5 => 7.23.5
    @mui/x-data-grid-pro: 7.23.5 => 7.23.5
    @mui/x-date-pickers: 7.23.3 => 7.23.3
    @mui/x-date-pickers-pro: 7.23.3 => 7.23.3
    @mui/x-license: 7.25.0 => 7.25.0
    @types/react: 18.3.12 => 18.3.12
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.6.3 => 5.6.3

Search keywords: variant, createTheme

Metadata

Metadata

Assignees

Projects

  • Status

    In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions