我在样式组件中动态渲染内容时遇到了麻烦.

难道我做错了什么？

我静态地在内容之前渲染伪时没有问题,但是当我动态地尝试它时它不起作用.

反应组件

const Test = (props) => {

    return (
        <Text before={12345}>
            {props.children}
        </Text>
    );

};

样式组件(不起作用)

const Text = styled.span`

    &:before {
        content: ${props => {
            console.log(props.before); // I see '12345' in log.
            return props.before;
            }
    }


`;

样式组件(这很好)

const Text = styled.span`

    &:before {
        content: '12345'
    }


`;

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

成分：

export const FooLink = styled(Link)`\n  padding: 0.5rem 2rem;\n  color: ${({ theme }) => theme.colors.white};\n  text-align: center;\n  margin: 0 auto;\n  position: relative;\n  font-size: ${({ theme }) => theme.fontSizes.p};\n  letter-spacing: 0.15em;\n  transition: ${({ theme }) => theme.animations.trans3};\n\n  &:after {\n    content: \'${FaArrowRight}\';\n    /* content: \'>\'; */\n    position: absolute;\n    opacity: 0;\n    right: -${({ theme }) => theme.spacings.small};\n    transition: ${({ theme }) => theme.animations.trans3};\n  }\n\n  &:hover {\n    padding-right: ${({ theme …