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

Question

在styled-components 中，我试图通过content 传递一个React 图标以在悬停时渲染它，但由于某种原因，我在悬停时的渲染是[Object Object]。

组件：

export const FooLink = styled(Link)`
  padding: 0.5rem 2rem;
  color: ${({ theme }) => theme.colors.white};
  text-align: center;
  margin: 0 auto;
  position: relative;
  font-size: ${({ theme }) => theme.fontSizes.p};
  letter-spacing: 0.15em;
  transition: ${({ theme }) => theme.animations.trans3};

  &:after {
    content: '${FaArrowRight}';
    /* content: '>'; */
    position: absolute;
    opacity: 0;
    right: -${({ theme }) => theme.spacings.small};
    transition: ${({ theme }) => theme.animations.trans3};
  }

  &:hover {
    padding-right: ${({ theme }) => theme.spacings.small};
    padding-left: ${({ theme }) => theme.spacings.xxSmall};
  }

  &:hover:after {
    opacity: 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: `'${<FaArrowRight />}'`;

所有尝试都呈现为[Object Object]

研究一下是否有人问过这个问题并且我已经阅读了：

• How to render pseudo before content dynamically in styled-component
• Before and After pseudo classes used with styled-components
• css pseudo code “li::before” in react inline style
• How do I get a variable from a graphQl query into a pseudo element in either inline styles or styled components
• Do psuedo selectors work in styled-components the same as in css with unicode characters

在styled-components 中，如何在content 中呈现 React 图标？

Answer 1

如果您需要将styled-components（或任何其他CSS-in-JS 库）与react-icons（或任何其他导出React.Component 并呈现<svg> 元素的库）的图标一起使用，我看到唯一的一种方法：将组件转换为带有标记字符串的url()，因为只有这样，您才能将图像传递给content 属性。对于该转换，您需要：React.createElement()、ReactDOMServer.renderToStaticMarkup() 和 encodeURIComponent()。另外，您可以改用Base64。

这个有效（CodeSandbox）：

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")
);

感谢this Github Gist。