渐变文字颜色，使用 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:

Answer 2

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

  <Typography
  variant="h1"
  align="left"
  color="grey.700"
  sx={{
    backgroundcolor: "primary",
    backgroundImage: `linear-gradient(45deg, #5514B4, #FF80FF)`,
    backgroundSize: "100%",
    backgroundRepeat: "repeat",
    backgroundClip: "text",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent"
  }}
>
  GRADIENT TEXT
</Typography>   

Codesandbox Example

Answer 3

I was having trouble getting this to work with MUI but i got it working with this approach. The key was using backgroundImage instead of background

WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundImage: '-webkit-linear-gradient(rgba(222, 53, 76, 0.8), rgba(226, 123, 27, 0.8))',