Button's custom color property

Hi there!

I’ve added some new colors to theme.palette. And primary, secondary buttons have own classes like MuiButton-outlinedPrimary based on variant value.

When i override Button color property component with my own palette colors MuiButton-outlinedPrimary and etc. classes disappear. Therefore hover background-color styles disappear, and I don’t know how to add suitable background-color with opacity.

Perhaps the solution is to add a hover property to buttons, but how to convert HEX to RGBA like rgba(83, 109, 254, 0.08)

Differences between default Button and custom, as you can see hover color is different

Custom button

[sakulstra]

If I understand this correctly it’s basically a request for dynamic colors in buttons. More or less a dupe of https://github.com/mui-org/material-ui/issues/13875

In the code you’re only overwriting the default style. Have a look at https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L21 if you want to check how it’s done in core.

A for now simpler variant would be to wrap the button with a custom theme provider, providing the palette you want to use inside your button.

[oliviertassinari]

@sakulstra Thanks.