如何更改 NativeBase 按钮颜色

Question

所以我尝试使用 NativeBase 按钮制作一个切换按钮。我在颜色设置方面遇到了困难。

• 变体

  选择：紫色（'#9747FF'）背景和轮廓，白色文本，

  未选择：白色背景，紫色（'#9747FF'）文本，浅灰色轮廓

当前代码

<HStack space={2}>
<Button
    variant={selectedGender === 'male' ? 'solid' : 'outline'}
    outlineColor="#9747FF"
    colorScheme={selectedGender === 'male' ? '#9747FF' : 'white'}
    onPress={() => handleGenderSelect('male')}
    _text={{ color: selectedGender === 'male' ? 'white' : '#9747FF' }}
>
    남성
</Button>
<Button
    variant={selectedGender === 'female' ? 'solid' : 'outline'}
    outlineColor="#9747FF"
    colorScheme={selectedGender === 'female' ? '#9747FF' : 'white'}
    onPress={() => handleGenderSelect('female')}
    _text={{ color: selectedGender === 'female' ? 'white' : '#9747FF' }}
>
    여성
</Button>
</HStack>```

Answer 1

一种方法是使用

style

覆盖 默认主题。像这样的东西：

<Button
  variant={selectedGender === 'male' ? 'solid' : 'outline'}
  style={{
    backgroundColor: selectedGender === 'male' ? '#9747FF' : 'white',
    borderColor: '#9747FF',
  }}
  onPress={() => handleGenderSelect('male')}
  _text={{ color: selectedGender === 'male' ? 'white' : '#9747FF' }}>
  Male
</Button>

另一种方法是通过扩展主题来自定义组件。