For each type of Material UI button variant, I have created 3 classes that apply a gradient: gradient, outlinedGradient, and containedGradient,
https://i.sstatic.net/paMvR.png
Instead of having to manually change the gradient class when altering button styles, I wanted to create a single class gradient and then develop more specific selectors for default, outlined, or contained buttons.
I attempted using the selectors
"& .MuiButton-contained":& .MuiButton-outlined, but the styles did not take effect.
https://i.sstatic.net/gwZGp.png
Not working:
const styles = (theme) => ({
root: {
padding: theme.spacing.unit
},
button: { margin: theme.spacing.unit },
gradient: {
background: theme.palette.primary.mainGradient,
"-webkitBackgroundClip": "text",
"-webkitTextFillColor": "transparent",
"& .MuiButton-contained": {
"-webkitBackgroundClip": "unset",
"-webkitTextFillColor": "black"
},
"& .MuiButton-outlined": {
...more styles
}
}
});
CodeSandbox:
Is it possible to achieve this? Can we target these button variants in CSS within Material UI?