反应组件作为背景图像
React component as backgroundImage
我在我的项目中使用了 react-icons，这个很棒的包提供的是将所有免费字体图像放在一个地方并用作 react 组件。
我想要实现的是从组件设置背景图像，例如：
<content className="content cover-content" style={{backgroundImage: `url(${<FaCar size={48} color="red"/>})`}}>
我不确定为什么这不起作用，理论上应该可以，有什么想法吗？
backgroundImage 是一个 CSS 属性 需要一个 URL 图片的路径，你可以下载图标并在本地添加到你的项目中。
或者您可以使用 CSS 属性 z-index
获得相同的结果
使用 styled-components 我们可以通过使用 CSS 属性 z-index 将其添加到主要内容后面来设置组件样式。
const Icon = styled.section`
..
z-index: -1;
`;
然后我们将其添加到图标周围以根据需要设置样式。
<Icon>
<FaCar />
</Icon>
Link 到沙盒：
https://codesandbox.io/s/wild-grass-sk9d9?file=/src/App.js
这不起作用，因为 CSS 规则不能包含 HTML 代码。通过使用 React 组件，您就可以做到这一点。此处指定背景图像的唯一方法是使用标准方法，即在 CSS 规则中为图像指定 URL。
我在我的项目中使用了 react-icons，这个很棒的包提供的是将所有免费字体图像放在一个地方并用作 react 组件。
我想要实现的是从组件设置背景图像，例如：
<content className="content cover-content" style={{backgroundImage: `url(${<FaCar size={48} color="red"/>})`}}>
我不确定为什么这不起作用，理论上应该可以，有什么想法吗？
backgroundImage 是一个 CSS 属性 需要一个 URL 图片的路径，你可以下载图标并在本地添加到你的项目中。
或者您可以使用 CSS 属性 z-index
使用 styled-components 我们可以通过使用 CSS 属性 z-index 将其添加到主要内容后面来设置组件样式。
const Icon = styled.section`
..
z-index: -1;
`;
然后我们将其添加到图标周围以根据需要设置样式。
<Icon>
<FaCar />
</Icon>
Link 到沙盒： https://codesandbox.io/s/wild-grass-sk9d9?file=/src/App.js
这不起作用，因为 CSS 规则不能包含 HTML 代码。通过使用 React 组件，您就可以做到这一点。此处指定背景图像的唯一方法是使用标准方法，即在 CSS 规则中为图像指定 URL。