css - 渐变字体很棒 IN REACT

Question

给 Font Awesome 图标添加渐变色一般看起来很容易，只需应用以下 css:

background: -webkit-linear-gradient(#9c47fc, #356ad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

但出于某种原因，我无法在 React 中实现它。我的 jsx 是:

<FontAwesomeIcon className="audio-icon" icon="step-backward" />

还有CSS:

.audio-icon {
  font-size: 20rem;
  text-align: center;
  position: absolute;
  background: -webkit-linear-gradient(#9c47fc, #356ad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

渐变不适用。如果我使用 !important:

background: -webkit-linear-gradient(#9c47fc, #356ad2) !important;

它适用于背景，但我无法将 !important 添加到 webkit-background-clip 和 webkit-text-fill-color

此外，尝试选择伪元素 .audio-icon::before 不会执行任何操作。

有什么想法吗？

提前致谢

Answer 1

我不确定这是否是 font aswesome npm for react 的问题，但无论如何解决方法就是按照旧方法进行: 1.在index.html中添加cdn链接 2. 使用正常的 html 语法:

<i className="fas fa-step-backward audio-icon"></i>

如果有人碰巧知道如何将它与 React 的 npm 包一起应用，我将不胜感激

谢谢