React 组件作为 backgroundImage答案

【问题标题】：React component as backgroundImageReact 组件作为 backgroundImage
【发布时间】：2023-03-17 22:35:02
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

          <Icon>
            <FaCar />
          </Icon>

【讨论】：

是的，但我不知道为什么不起作用，请参见示例：codesandbox.io/s/hidden-framework-y4g11?file=/src/App.js
所以最终尝试使用库，这就是我最终得到的。 codesandbox.io/s/wild-grass-sk9d9?file=/src/App.js 通过向图标添加一个类名，您可以使用 CSS 设置它的样式。

【解决方案2】：

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

【讨论】：