Comment faire pour afficher dynamiquement le pseudo avant le contenu dans le composant stylé

Question

J'ai un problème de rendu dynamique du pseudo avant le contenu dans les composants stylés.

Est-ce que je fais quelque chose de mal?

Je n'ai aucun problème lorsque je rend statiquement le pseudo avant le contenu, mais cela ne fonctionne pas lorsque je l'essaie dynamiquement.

React Component

const Test = (props) => { 

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

}; 

Styled Component (Œuvre non)

const Text = styled.span` 

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


`; 

Styled Component (Cela fonctionne bien)

const Text = styled.span` 

    &:before { 
     content: '12345' 
    } 


`; 

Answer 1

C'est parce que content valeur doit être entre guillemets

Voici le CSS de travail

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

Veuillez noter que je mets à profit ES6 new features dans lequel une seule instruction Il n'est pas nécessaire d'utiliser des accolades {} et return.

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

Answer 2

-composants style fonctionne comme Sass, rien de différent

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

`;

Je suis // rend: "Je suis un"

Référence provenant Before and After pseudo classes used with styled-components