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

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

您需要在 h1 标签上添加一个唯一的 key 以强制重绘。 key 可以与您的 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>
);