如何在样式组件中动态地在内容之前渲染伪 [英] How to render pseudo before content dynamically in styled-component

问题描述

我在样式化组件中动态呈现伪内容之前遇到了麻烦.

我做错了什么吗?

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

反应组件

const Test = (props) =>{返回 (<之前的文字={12345}>{props.children}</文本>);};

样式组件(不工作)

const Text = styled.span`&:之前{内容:${props =>{console.log(props.before);//我在日志中看到12345".返回 props.before;}}`;

样式组件(这很好用)

const Text = styled.span`&:之前{内容:'12345'}`;

解决方案

那是因为 content 值必须在 css 中的引号内

示例:

const Block = styled.div`&:之前{显示:绝对；顶部:0;内容:'${props =>props.before}'}`

请注意，我正在利用 ES6 新功能 其中一个声明函数不需要使用大括号{}和return.

代码笔:https://codepen.io/metju/pen/zEKeOm

I'm having a trouble of rendering pseudo before content dynamically in styled-components.

Am I doing something wrong?

I have no problem when I render pseudo before content statically, but it doesn't work when I try it dynamically.

React Component

const Test = (props) => {

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

};

Styled Component(Not Work)

const Text = styled.span`

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


`;

Styled Component(This works fine)

const Text = styled.span`

    &:before {
        content: '12345'
    }


`;

解决方案

That is because content value must be within quotes in css

Example:

const Block = styled.div`
    &:before {
        display: absolute;
        top:0;
        content: '${props => props.before}'
    }
`

Please note that I am leveraging ES6 new features wherein a single statement function there is no need to use curly braces {} and return.

Codepen: https://codepen.io/metju/pen/zEKeOm

这篇关于如何在样式组件中动态地在内容之前渲染伪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！