Comment éviter $ {props => props.myProp} dans les composants de style?

Question

Comment pouvons-nous éviter d'écrire ${props => props.myProp} dans styled-components?

Par exemple, si nous Styling un bouton:

const Button = styled.button` 
    background: ${props => props.background}; 
    color: ${props => props.color}; 
`; 

render(
    <div> 
     <Button 
      background="red" 
      color="white" 
     > 
      Example 1 
     </Button> 

     <Button 
      background="black" 
      color="yellow" 
     > 
      Example 2 
     </Button> 
    </div> 
); 

dans la documentation here et here nous avons besoin d'écrire quelque chose comme ${props => props.myProp}. Mais cela semble ennuyeux et inutile. Serait mieux si nous pouvions écrire juste ${props.myProp}.

Ma solution actuelle est d'écrire quelque chose comme:

const Button = styled.button`${props => ` 
    background: ${props.background}; 
    color: ${props.color}; 
`}`; 

mais ce n'est pas claire et simple comme l'utilisation juste ${props.color}.

Alors, comment pouvons-nous faire cela?

Answer 1

Vous pouvez écrire une fonction d'aide qui peut être utilisé partout où vous voulez extraire un accessoire d'accessoires:

const props = name => p => p[name]; 

, utilisez-vous:

const Button = styled.button` 
    background: ${props('bgColor')}; 
`; 

L'utilisation props('bgColor') est aussi proche que vous pouvez obtenir une syntaxe similaire à tout en conservant un comportement correct.

Si vous voulez être méticuleux, vous pouvez créer une variable au lieu de passer directement une chaîne:

const bg = 'bgColor'; 
const Button = styled.button` 
    background: ${props(bg)}; 
`; 

---

Comme suggéré par mxstbr dans les commentaires, vous aimerez aussi le paquet styled-props.