How do I style a <Typography /> ponent so that its font-color bees 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?

How do I style a <Typography /> ponent so that its font-color bees 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?

• javascript
• css
• reactjs
• material-ui
• styling

• 1 The immediate thing to note is that a gradient is a ‘special kind of’ image, not a color, in CSS. See for example [link] developer.mozilla/en-US/docs/Web/CSS/linear-gradient() Could you put up a working snippetj so we can see the problem and also describe further what ‘this did not work as expected’ means. – A Haworth Commented Feb 26, 2021 at 19:02
• An image? or you mean the whole code? – Laczkó Örs Commented Feb 26, 2021 at 19:05
• Code that we can run which shows your problem. Use the SO snippet system. – A Haworth Commented Feb 26, 2021 at 19:06
• I'm trying to insert a working template, but I have to admit, I have not a single clue how can I upload my react and material-ui project to SO. – Laczkó Örs Commented Feb 26, 2021 at 19:15
• 1 @BudaÖrs Try setting up a CodeSandbox or another similar code sharing/collaboration system and share it here. – jharris711 Commented Feb 26, 2021 at 20:42

3 Answers 3

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:

After some time playing around, I e 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

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))',