Javascript 如何将React.Component放入CSS内容属性（在：before/：after伪元素中）？

在

样式化组件

中，我试图通过

内容

获得一个在悬停时渲染的React图标，但由于某些原因，我的悬停时渲染是

[Object Object]

组成部分：

export const-doubink=styled（链接）`
填充：0.5rem 2rem；
颜色：${（{theme}）=>theme.colors.white}；
文本对齐：居中；
保证金：0自动；
位置：相对位置；
字体大小：${（{theme}）=>theme.fontSizes.p}；
字母间距：0.15em；
转换：${（{theme}）=>theme.animations.trans3}；
&：之后{
内容：“${FaArrowRight}”；
/*内容：“>”*/
位置：绝对位置；
不透明度：0；
右：-${（{theme}）=>theme.spacings.small}；
转换：${（{theme}）=>theme.animations.trans3}；
}
&：悬停{
右边填充：${（{theme}）=>theme.spacings.small}；
左侧填充：${（{theme}）=>theme.spacings.xxSmall}；
}
&：悬停：之后{
不透明度：1；
${（{theme}）=>theme.spacings.xSmall}；
}
`

我带来了一切：

import styled from 'styled-components'
import { Link } from 'gatsby'
import { FaArrowRight } from 'react-icons/fa'

对内容的其他尝试

content: ${FaArrowRight};

但我发现这不起作用：

这是因为内容值必须在CSS中的引号内

意识到我可能在CSS精神状态中花费了太长时间，我尝试引入React：

import React from 'react'
import styled from 'styled-components'
import { Link } from 'gatsby'
import { FaArrowRight } from 'react-icons/fa'

和渲染：

content: '${(<FaArrowRight />)}';

content:'${（）}'；

当我尝试使用模板文字时，我得到一个缺少分号的错误：

content: `'${<FaArrowRight />}'`;

内容：`${}`；

所有尝试都呈现为

[对象]

研究一下是否有人问过这个问题，我已经通读了：

在

样式化组件中

如何在

内容中呈现React图标

？

如果您需要使用（或JS库中的任何其他CSS）中的图标（或导出呈现元素的任何其他库），我认为只有一种方法：使用标记字符串将组件转换为属性，因为只有这种方法才能将图像传递给案例中的属性。对于该转换，您需要：、和。此外，您还可以使用

这个有效（）：

从“react”导入{createElement}；
从“react dom”导入{render}；
从“react dom/server”导入{renderToStaticMarkup}；
从“样式化组件”导入样式化；
从“盖茨比”进口{Link}；
从“react icons/fa”导入{FaArrowRight}；
窗口。uuu加载器={enqueue:（）=>{}，悬停：（）=>{}；
常量reactSvgComponentToMarkupString=（组件、道具）=>
`数据：image/svg+xml，${encodeURIComponent(
renderToStaticMarkup（createElement（组件、道具））
)}`;
常量傻瓜链接=已设置样式（链接）`
${（{color}）=>color&&`color:${color}；`}
&：之后{
内容：${（{color}）=>
`url（${reactSvgComponentToMarkupString（FaArrowRight{
颜色
})})`};
位置：绝对位置；
不透明度：0；
}
&：悬停：之后{
不透明度：1；
}
`;
渲染(
带箭头的链接（红色）
带箭头的链接（默认）
,
document.getElementById（“根”）
);

---

多亏了。

在

之前粘贴
&
：在
之后，这是一个编辑错误，但即使如此，它仍然呈现为
对象对象
“${FaArrowRight}”
使用反勾号而不是单引号。@TomBombadil根据我的研究，如问题中所述，单引号应该用于
内容
而不是模板文本。据我所知，您不能将对象作为值传递给内容。我想你正在经过一个物体。不确定
FaArrowRight
是字符串还是对象。我可以引入组件，但由于某些原因，它不会应用任何颜色。有没有关于使用该颜色的建议？@DᴀʀᴛʜVᴀᴅᴇʀ如何传递颜色？我已经尝试将color:red和fill:red添加到：after，但svg仍然渲染black@DᴀʀᴛʜVᴀᴅᴇʀ在代码中添加了颜色道具，请结账。@Leo不，这是你的选择。
import { createElement } from "react";
import { render } from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import styled from "styled-components";
import { Link } from "gatsby";
import { FaArrowRight } from "react-icons/fa";

window.___loader = { enqueue: () => {}, hovering: () => {} };

const reactSvgComponentToMarkupString = (Component, props) =>
  `data:image/svg+xml,${encodeURIComponent(
    renderToStaticMarkup(createElement(Component, props))
  )}`;

const FooLink = styled(Link)`
  ${({ color }) => color && `color: ${color};`}
  &:after {
    content: ${({ color }) =>
      `url(${reactSvgComponentToMarkupString(FaArrowRight, {
        color
      })})`};
    position: absolute;
    opacity: 0;
  }

  &:hover:after {
    opacity: 1;
  }
`;

render(
  <>
    <div>
      <FooLink to="/test1" color="red">
        Link with arrow (red)
      </FooLink>
    </div>
    <div>
      <FooLink to="/test2">Link with arrow (default)</FooLink>
    </div>
  </>,
  document.getElementById("root")
);