Свойство 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

Проблема не в 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