Gradient text color, using Material-UI <Typography />

Question

How do I style a <Typography /> component so that its font-color becomes a gradient?

So far what I've tried:

const CustomColor = withStyles({
  root: {
    fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  },
})(Typography);

This did not work, so I tried to follow this tutorial, and did this implementation:

const CustomColor = withStyles({
  root: {
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    webkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  },
})(Typography);

This also did not work as expected, but at least some sort of gradient showed up.

Another thing I've tried is:

<Typography style={{
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    webkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  }}> Hello world! </Typography>

This kinda worked, but depending on the width of the element the gradient changes. This is an unwanted behavior. Also I would like to stik to a withStyles style solution.

Online demo: here

Any tipps? What have I missed?

Answer 1

replace the webkitBackgroundClip with WebkitBackgroundClip. JSS takes the capital letters for webkit.

const CustomColor = withStyles({
  root: {
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent"
  }
})(Typography);

Here is the working demo: