CSS [Styled-Component : 가상셀렉터(::before content)동적변환 ]

결론 : content 요소는 따옴표(')로 감싸져있어야 함

 

상황 : styled-component에서 가상 셀렉터 ::before의 content를 동적으로 변환 시키려고 하였는데 되지 않았다

 

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'
    }
`;

 

 

 

Styled Component(Fixed)

 

const Text = styled.span`

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

 

참조

https://stackoverflow.com/questions/46339034/how-to-render-pseudo-before-content-dynamically-in-styled-component