如何在React Native的Tamagui主题中设置专属全局按钮样式？

Tamagui的主题配置默认是全局生效的，直接在createTheme中设置backgroundPress这类状态属性，会作用于所有支持对应状态的组件（比如带onPress的基础容器组件），没法直接通过主题仅针对Button组件生效。要实现按钮专属的全局样式，有两种可行方案：

1. 为Button组件单独配置主题变量 #

Tamagui支持在主题中为特定组件定义专属样式，这样配置的属性只会作用于Tamagui原生Button组件：

import tokens from './tokens';
import { tokens as defaultTokens } from '@tamagui/themes';
import { createTheme } from 'tamagui';

const myTheme = createTheme({
  // 全局基础样式
  background: tokens.color.white,
  color: tokens.color.black,
  shadowColor: defaultTokens.color.gray12Light,
  
  // Button组件专属样式
  Button: {
    background: tokens.color.white,
    backgroundHover: tokens.color.primary,
    backgroundPress: defaultTokens.color.pink6Light,
    borderColor: tokens.color.lavender_pink,
    borderColorHover: tokens.color.white,
    colorHover: tokens.color.white,
    colorPress: defaultTokens.color.pink6Light,
  },
})
export default myTheme;

2. 使用styled()封装自定义Button组件（更灵活） #

如果需要更复杂的样式定制或结构修改，用styled()封装专属Button是更常用的方案，后续项目统一导入使用即可：

import { Button } from 'tamagui';
import { styled } from 'tamagui';

const CustomButton = styled(Button, {
  // 基础样式
  background: '$white',
  borderColor: '$lavender_pink',
  
  // 状态样式
  hoverStyle: {
    background: '$primary',
    borderColor: '$white',
    color: '$white',
  },
  pressStyle: {
    background: '$pink6Light',
    color: '$pink6Light',
  },
})

export default CustomButton;

关于Tamagui主题属性的完整列表，你可以通过IDE的类型提示（比如VSCode）查看，或者直接查阅Tamagui源码中的Theme类型定义来获取所有可用属性。

内容的提问来源于stack exchange，提问作者Stretch0