Wie vermeidet man $ {requisiten => props.myProp} in gestylten Komponenten?

Question

Wie können wir vermeiden, ${props => props.myProp} in styled-components zu schreiben?

Zum Beispiel, wenn wir einen Knopf Styling:

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> 
); 

in der Dokumentation here und here wir brauchen so etwas wie ${props => props.myProp} zu schreiben. Aber das sieht nervig und unnötig aus. Wäre besser, wenn wir nur ${props.myProp} schreiben könnten.

Meine aktuelle Problemumgehung ist wie etwas zu schreiben:

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

aber dies ist nicht klar und einfach wie mit nur ${props.color}.

Also, wie können wir das tun?

Answer 1

Sie könnten eine Hilfsfunktion schreiben, die überall dort eingesetzt werden, können Sie wollen eine Stütze von Requisiten extrahieren:

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

es dann wie verwenden:

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

props('bgColor') Verwendung ist etwa so nah wie Sie können eine Syntaxähnlichkeit zu erhalten, während Sie immer noch das korrekte Verhalten beibehalten.

Wenn Sie sorgfältig sein wollen, können Sie eine Variable erstellen, anstatt einen String direkt von vorbei:

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

---

Wie mxstbr in den Kommentaren vorgeschlagen, könnten Sie auch wie die styled-props Paket.