渐变文本颜色，使用 Material-UI <Typography />

Question

如何设置<Typography />组件的样式以使其font-color成为渐变？

到目前为止我已经尝试过：

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>

这有点有效，但根据元素的宽度，渐变会发生变化。这是一种不受欢迎的行为。我也想坚持一种withStyles风格解决方案。

在线演示：这里

有什么建议吗？我错过了什么？

Answer 1

将 替换webkitBackgroundClip为WebkitBackgroundClip. JSS 采用 webkit 的大写字母。

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

这是工作演示：