ReactJs StyledComponents

Question

Ich möchte eine Eigenschaft für die Rückkehr gestylt Schaltfläche verwenden. Ich suche etwas ähnliches:

const Button = styled.button` 
/* Adapt the colors based on primary prop */ 
    background: ${props => props.primary ? 'palevioletred' : 'white'}; 
    color: ${props => props.primary ? 'white' : 'palevioletred'}; 

    font-size: 1em; 
    margin: 1em; 
    padding: 0.25em 1em; 
    border: 2px solid palevioletred; 
    border-radius: 3px; 
`; 

export default Button; 

Leider habe ich mehr als 2 Requisiten basierend auf dem ich gestylt Komponente zurückgeben müssen.

Answer 1

Sie können Objekt immer als Eigenschaft übergeben.

<Button myStyle={ { color: color ... } } /> 

Sie sie als

const Button = styled.button` 
    color: ${props => props.myStyle && props.myStyle.color ? props.myStyle.color : 'somethingdefault'}; 
`; 

Answer 2

Dank für Tip verwenden werden, benutzte ich Funktion zur Bestimmung der Farbe einzustellen.

 function getColor(props){ 
      if(props.btn==='red'){return 'red';} 
     }  


    color: ${(props) => getColor(props)};