Question

如果您想进入实时代码，请在此处准备此CodeSandBox： https://codesandbox.io/s/0j99m3m50

这就是我在做什么：

我有带有状态对象的React组件，该对象具有两个具有值的属性（用户，渐变）

this.state = {
    users: "programmer",
    gradient: "linear-gradient(120deg, #f093fb 0%, #f5576c 100%)"
};

我正在用h1 JSX标签渲染用户，但是我应该看到文本被剪切到每个随机渐变背景上，但是它不起作用，为什么？

render() {
  const gradually = this.state.gradient;
  const userGradient = {
    background: `${gradually}`,
    WebkitBackgroundClip: "text !important",
    backgroundClip: "text !important",
    color: "transparent"
  };

  return (
    <div>
      <h1 style={userGradient} className="text">
        {this.state.users}
      </h1>
    </div>
  );
}

Answer 1

您需要在key标签上添加唯一的h1才能强制重绘。该密钥可能与您的gradually变量相同。您也可以摆脱剪辑上的!important。

以下是对您的沙盒进行有效更改的链接：https://codesandbox.io/s/css-background-clip-not-being-applied-n34o0

const gradually = this.state.gradient;
const userGradient = {
  background: `${gradually}`,
  WebkitBackgroundClip: "text", // Removed !important
  backgroundClip: "text", // Removed !important
  color: "transparent"
};

return (
  <div>
    <h1
      style={userGradient}
      className="text"
      key={gradually} // Add key
      >
      {this.state.users}
    </h1>
  </div>
);

Answer 2

问题不在JavaScript和/或React中。问题出在风格上。

const userGradient = {
    background: `${gradually}`,
    WebkitBackgroundClip: "text !important",
    backgroundClip: "text !important",
    color: "transparent"   // <------------------ HERE
};

您已将颜色设置为“透明”，因此您看不到它，因为它是完全透明的errrrr。但这是在这里。您可以在实时示例中找到它（右键单击，检查元素）。因此，只需将其删除。或将其更改为您想要的任何内容。例如“＃f00”。

https://developer.mozilla.org/en-US/docs/Web/CSS/color

背景发生动态变化时，CSS background-clip属性未在React中应用

2 个答案: