[theme] Custom Variant

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I would love the ability to use a variant with any string and with that variant I could style the component using theme overrides. For example, let’s say I have 4 types of buttons throughout my app and each button has a custom variant, inside theme I would simply use MuiButton with my custom variant names and style them as I please. The variant would act as an identifier and would give the theme more flexibility in styling the entire app and it would not tie me down to a preset list of variants.

Current Behavior 😯

Currently variants are limited and come with additional styling.

Context 🔦

Limits my ability to use theme to a greater extent and pushes me to style more locally than globally.

[philip-lf]

Thanks for your responses. @oliviertassinari , I don’t believe they are the same. Currently for Button I have these variants accessible to me:

Given two buttons, one with an outlined variant and the other without, the theme can target the button with the variant and style it specifically like this:

<Button  variant="outlined">
     Outlined Button
</Button>

<Button>
     Button
</Button>

const theme = createMuiTheme({
     overrides: {
          MuiButton: {
               root: {
                    backgroundColor: 'red'
               },
               outlined: {
                    backgroundColor: 'blue'
               }
          }
     }
})

The feature I would hope for is that a variant of any name can be applied and targeted through the theme. It would look something like this:

<Button  variant="customVariantName">
     Custom Button
</Button>

const theme = createMuiTheme({
     overrides: {
          MuiButton: {
               root: {
                    backgroundColor: 'red'
               },
               customVariantName: {
                    backgroundColor: 'blue'
               }
          }
     }
})

The variant would act as an identifier that could be accessed through the theme. So instead of applying unique styles to every component I would centralize my styles in one place.

[kylealwyn]

MaterialUI has been a pleasure to work with but I’m surprised about the lack of support for custom colors/variants. I see this is bookmarked for v5 but the Oct. 2020 due date is some time away. Are there any updates / plans to support this in v4?