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

waldothedeveloper

如果你想进入实时代码，我在这里准备了这个 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>
  );
}

沙拉娜

你需要key在你的h1标签上添加一个唯一的来强制重绘。键可能与您的graduallyvar具有相同的值。您还可以删除!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>
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。