backgroundImage是一个CSS属性，需要一个指向图像的URL路径，你可以下载图标并将其本地添加到你的项目中。
或者，您可以通过使用CSS属性z-index来实现相同的结果
使用styled-components，我们可以通过使用CSS属性z-index将组件添加到主内容后面来设置组件的样式。

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

然后，我们将其添加到Icon周围，以根据需要设置其样式。

<Icon>
            <FaCar />
          </Icon>

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

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

创建组件以使其可重用

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const BackgroundIcon = ({ onClick = () => { }, children, className, Icon, backgroundImgSize = 124, top = 20, right = 20 }) => {
    const iconString = ReactDOMServer.renderToString(<Icon />);
    const encodedIcon = encodeURIComponent(iconString);
    const backgroundImage = `url("data:image/svg+xml;charset=UTF-8,${encodedIcon}")`;
return (
    <div
        onClick={onClick}
        style={{
            backgroundImage,
            backgroundSize: `${backgroundImgSize}px`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: `${top}% ${right}%`,
        }}
    >
        {children}
    </div>
    );
};

export default BackgroundIcon;

像这样使用它

<BackgroundIcon
backgroundImgSize={124}
Icon={() => <AnIcon >}
strokeWidth={1.2} />}
top={98}
right={0}
> </BackgroundIcon>