Gradient text color, using Material-UI

Question

How do I style a 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:

 Hello world!

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?

user_11222282 · Answer

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:

user_19244118 · Answer

After some time playing around, I come up with this solution...

  
  GRADIENT TEXT

Codesandbox Example

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

2 Answers