javascript - React 组件作为背景图片

Question

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

我想要实现的是从组件设置背景图像，例如:

<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