[theme] How to customize a specific state in theme.components.stylesOverrides?

[danielmulvad]

I am extending the palette to include a "light" theme, so I override the PaletteOptions for the light option to be available.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Type '{ outlinedSecondary: { borderColor: string; "&::before": { content: string; }; }; outlinedLight: { "&::before": { content: string; }; }; outlined: { "&:hover": { borderColor: string; }; borderColor: string; borderWidth: string; borderStyle: string; "&::before": { ...; }; }; root: { ...; }; }' is not assignable to type 'Partial<Record<"disabled" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon" | "label" | "text" | "root" | "textInherit" | "textPrimary" | "textSecondary" | "outlined" | "outlinedInherit" | ... 22 more ... | "iconSizeLarge", CSSProperties | ... 1 more ... | PropsFunc<...>>>'.
  Object literal may only specify known properties, and 'outlinedLight' does not exist in type 'Partial<Record<"disabled" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon" | "label" | "text" | "root" | "textInherit" | "textPrimary" | "textSecondary" | "outlined" | "outlinedInherit" | ... 22 more ... | "iconSizeLarge", CSSProperties | ... 1 more ... | PropsFunc<...>>>'.ts(2322)
components.d.ts(55, 5): The expected type comes from property 'styleOverrides' which is declared here on type '{ defaultProps?: Partial<OverrideProps<ButtonTypeMap<{}, "button">, "button">>; styleOverrides?: Partial<Record<"disabled" | "disableElevation" | ... 33 more ... | "iconSizeLarge", CSSProperties | ... 1 more ... | PropsFunc<...>>>; variants?: { ...; }[]; }'

Expected Behavior 🤔

using styleOverrides to override a new palette color should work.

Steps to Reproduce 🕹

https://codesandbox.io/s/hopeful-fast-c9pqt?file=/src/App.tsx, uncomment lines 58 to 62 to break.
App.test.tsx ensures that MuiButton-outlinedLight is created.

Steps:

1. Create "light" as a new color in the palette by overriding createPalette's PaletteOptions
2. Add "light" as a color option available to Buttons by overriding Button's ButtonPropsColorOverrides
3. (break here) Implement

<Button color="light" /> // ok - themable
<Button variant="outlined" /> // ok -themable
<Button color="light" variant="outlined" /> // classes generated, but not themable (see codesandbox)

Context 🔦

I am using more than the primary and secondary colors, and want to add a third "light" color to the palette. This works fine, but mixing colors and variants among components breaks.

Your Environment 🌎

`npx @material-ui/envinfo`

Browser Version: Google Chrome | 91.0.4437.0 (Official Build) canary (x86_64)

    System:
    OS: macOS 11.3
  Binaries:
    Node: 14.12.0 - ~/.nvm/versions/node/v14.12.0/bin/node
    Yarn: Not Found
    npm: 6.14.10 - ~/.nvm/versions/node/v14.12.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.11
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1
  npmPackages:
    @emotion/react: ^11.1.5 => 11.1.5
    @emotion/styled: ^11.1.5 => 11.1.5
    @material-ui/core: ^5.0.0-alpha.27 => 5.0.0-alpha.27
    @material-ui/styled-engine:  5.0.0-alpha.25
    @material-ui/styles:  5.0.0-alpha.27
    @material-ui/system:  5.0.0-alpha.27
    @material-ui/types:  5.1.7
    @material-ui/unstyled:  5.0.0-alpha.27
    @material-ui/utils:  5.0.0-alpha.27
    @types/react: ^17.0.2 => 17.0.2
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    typescript: ^4.2.3 => 4.2.3

[oliviertassinari]

@danielmulvad This is simply not supported. We might try to remove all mentions from things like

      styleOverrides: {
        outlinedSecondary: {

in the documentation (only supporting .root and other slots, not for any specific state). You can use the variant instead: https://next.material-ui.com/customization/theme-components/#adding-new-component-variants

[oliviertassinari]

Ok, to be more comprehensive for the future developers and designers reading this. There are two possible solutions:

1. You can either use the global class name that is generated for the given state

      styleOverrides: {
        root: {
          borderRadius: ".25rem",
          minHeight: "40px",
          minWidth: "min(100%, 140px)",
          textTransform: "none",
          "&.MuiButton-outlinedLight": {
            "&::before": {
              content: '"outlined light doesn\'t work!"'
            }
          }
        },

https://codesandbox.io/s/admiring-cache-mq4ee?file=/src/App.tsx

2. or you can keep on using the variants, compounding them.

      variants: [
        // light variant
        {
          props: { color: "light" },
          style: {
            "&::before": {
              content: '"light"'
            }
          }
        },
        {
          props: { color: "light", variant: "outlined" },
          style: {
            "&::before": {
              content: '"outlined light doesn\'t work!"'
            }
          }
        }
      ],

https://codesandbox.io/s/elegant-taussig-1yudl?file=/src/App.tsx

@danielmulvad is it clearer? Do you see something that we could improve in the documentation?

[danielmulvad]

Yes, it is clear now, thank you.
To improve documentation, you could include an in-depth tutorial on using module augmentation to extend the theme using TypeScript. I understand that it's used here and here, but there is no clear documentation on the topic.

[oliviertassinari]

@danielmulvad The two links are identical, I assume you meant:

• https://next.material-ui.com/customization/typography/#adding-amp-disabling-variants
• https://next.material-ui.com/customization/theme-components/#adding-new-component-variants.

I believe there should be a mention of types and props that can be extendable in the API pages.