Is there a way to apply a gradient font color to a <Typography /> component?
I've attempted the following:
const CustomColor = withStyles({
root: {
fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
},
})(Typography);
This approach did not yield the desired result. Following a tutorial from here, I then tried:
const CustomColor = withStyles({
root: {
fontSize: 20,
background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
webkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
},
})(Typography);
Although this method displayed some sort of gradient, it was not as expected. https://i.sstatic.net/xtoTZ.png
Another attempt I made was:
<Typography style={{
fontSize: 20,
background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
webkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
}}> Hello world! </Typography>
While this method somewhat worked, the gradient changed depending on the element's width, which is not desired. I prefer sticking to a solution using withStyles.
View an online demo here
Any suggestions or tips on what I may have overlooked?