javascript - React 组件作为 backgroundImage

Question

我在我的项目中使用 react-icons，这个很棒的包提供的是将所有免费字体图像放在一个地方并用作反应组件。

我想要实现的是从组件设置一个 backgroundImage，例如：

<content className="content cover-content" style={{backgroundImage: `url(${<FaCar size={48} color="red"/>})`}}>

而且我不确定为什么这不起作用，理论上应该起作用，有什么想法吗？

Answer 1

backgroundImage是一个 CSS 属性，需要图像的 URL 路径，您可以下载图标并将其本地添加到您的项目中。

或者您可以通过使用 CSS 属性来获得相同的结果z-index

使用 styled-components，我们可以通过使用 CSS 属性 z-index 将组件添加到主要内容后面来设置组件样式。

 const Icon = styled.section`
      ..
      z-index: -1;
    `;

然后我们将它添加到图标周围以根据需要设置样式。

          <Icon>
            <FaCar />
          </Icon>

沙盒链接： https ://codesandbox.io/s/wild-grass-sk9d9?file=/src/App.js

Answer 2

这是行不通的，因为 CSS 规则不能包含 HTML 代码。通过使用 React 组件，您正是这样做的。在这里指定背景图像的唯一方法是使用标准方法，即在 CSS 规则中指定图像的 URL。