スタイル前のコンポーネントでコンテンツの前に擬似を動的にレンダリングする方法

Question

スタイリングされたコンポーネントでコンテンツの前に擬似をレンダリングする手間があります。

何か間違っていますか？

静的にコンテンツの前に擬似をレンダリングしても問題はありませんが、動的に試しても機能しません。

は、コンポーネント

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


`; 

Answer 1

から取ら

リファレンス作業CSSが

である "私は"

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

私はES6 new featuresを利用していますが、ここでは単一の文func中括弧{}とreturnを使用する必要はありません。

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

Answer 2

スタイル・コンポーネントは、SASSと同じ働きに反応します何も違う

const Text = styled.span` 
    &:before { 
     content: ${props => !!props.before ? props.before : " "}; 
    } 

`;

私は//のレンダリング午前：content値はここで引用符

以内でなければならないためである Before and After pseudo classes used with styled-components