Javascript 渐变文本颜色，使用材质UI<；排版/>；

如何设置

组件的样式，使其

字体颜色成为渐变色

到目前为止，我一直在尝试：

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

这不起作用，所以我尝试按照教程进行操作，并执行以下实现：

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

这也没有达到预期效果，但至少出现了某种梯度。

我试过的另一件事是：

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

你好，世界！

这有点奏效，但根据元素的宽度，渐变会发生变化。这是一种不受欢迎的行为。此外，我还想讨论一个
风格的
解决方案

在线演示：

有小费吗？我错过了什么？
将
webkitBackgroundClip
替换为
webkitBackgroundClip
。JSS采用webkit的大写字母

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

以下是工作演示：

首先要注意的是，渐变在CSS中是一种“特殊类型”的图像，而不是颜色。例如，请参见[link]，您是否可以提供一个工作片段J，以便我们可以看到问题，并进一步描述“这没有按预期工作”的含义。图像？或者你是说整个代码？我们可以运行的代码显示了你的问题。使用SO snippet系统。我正在尝试插入一个工作模板，但我必须承认，我一点也不知道如何将我的
react
和
material ui
项目上传到SO。@BudaÖrs尝试建立一个或其他类似的代码共享/协作系统，并在此处共享。