[docs] Component Variants

[mightym]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Goto https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

Current behavior 😯

The docs explicitly say "You can use the variants key in the theme's components section to create new variants to Material UI components."

I created a new button variant like described in the docs. Also added the ButtonPropsVariantOverrides module augmentation.
Worked great and as expected.
But I interpreted the sentence above from the docs that this is basically doable for all components. So I created in the same way for a CardHeader a new variant. But realized that there are not types like CardHeaderPropsVariantOverrides. Read a bit through the issues here and understood that this is basically not possible for ALL components. Just for some which already have variants.

But the weird thing is: it works somehow. Though I'm not seeing a class for my "small" variant on the Cardheader like MuiCardHeader-small, but the styles I defined in the theme variant are applied.

This is how the DOM element looks like (I realized that the variant property being interpreted as a html attribute)

<div class="MuiCardHeader-root css-wha30x-MuiCardHeader-root" variant="small">
    <div class="MuiCardHeader-content css-1qbkelo-MuiCardHeader-content">...</div>
</div>

And css-wha30x-MuiCardHeader-root is applying my variant styles.

Maybe its just me being confused about this. But I just wanted to leave it here in case someone else is also confused :)

Expected behavior 🤔

A bit clearer documentation if variants can be used on all components or on only some, like button etc.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.6
  Binaries:
    Node: 18.9.0 - /opt/homebrew/bin/node
    Yarn: 1.19.0 - /opt/homebrew/bin/yarn
    npm: 7.24.2 - ~/Developer/mui-test/node_modules/.bin/npm
  Browsers:
    Chrome: 106.0.5249.61
    Edge: Not Found
    Firefox: 104.0.2
    Safari: 16.0

[mnajdova]

Thanks for the report. We had this reported couple of times now in #34238 and #33510. I am closing this as a duplicate, we already started working on an RFC for fixing the issue, we will link it in the issues related to it.

[mightym]

@mnajdova but just for my understanding, is the behavior that the variants (at least) work like I described something I can rely on? Or is this more a coincidence that I shouldn't consider a reliable?

[mnajdova]

@mnajdova but just for my understanding, is the behavior that the variants (at least) work like I described something I can rely on? Or is this more a coincidence that I shouldn't consider a reliable?

I wouldn't rely on it, as we haven't tested this behavior. For example, there may e issues like variant prop being propagated to the DOM node etc.