样式化组件多个道具（React Native）答案

【问题标题】：Styled Component multiple props (React Native)样式化组件多个道具（React Native）
【发布时间】：2021-09-18 22:37:24
【问题描述】：

我在我的 React Native 应用程序中使用 Styled Components，我正在尝试弄清楚如何使用多个道具。

我的组件：

<SelectedPill active={true} color={'red'}>Text Here</SelectedPill>

我的样式化组件：

const SelectedPill = styled.TouchableOpacity`
  ${({active}) => active && `
    background: ${props => (props.color ? props.color : '#292929')};
  `};
`

我在样式化组件中尝试做的是，如果道具“活动”设置为 true，则获取组件中的“颜色”道具并应用它。

【问题讨论】：

标签： reactjs react-native styled-components

【解决方案1】：

这应该可行：

const SelectedPill = styled.TouchableOpacity`
   ${({active, color}) => active && `
      background: ${color ? color : 'red'};
   `};
`

【讨论】：