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

Question

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

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

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

这没有用，所以我尝试按照 this 教程进行操作，并执行了以下实现：

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 风格的解决方案。

在线演示：here

有小费吗？我错过了什么？

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);

这是工作演示：

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

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

javascript

css

styling

reactjs

material-ui