ReactJs StyledComponents

Question

스타일 단추를 반환하는 데 하나의 속성을 사용하고 싶습니다. 나는 유사한 무언가를 찾고 있어요 :

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; 

불행하게도 나는 스타일 구성 요소를 반환해야하는에 따라 2 개 이상의 소품이있다.

Answer 1

항상 개체를 속성으로 전달할 수 있습니다.

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

당신이 힌트

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

Answer 2

감사로를 사용하는 것입니다, 나는 색상을 설정하는 결정을 위해 기능을 사용했다.

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


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