如何在 React Native 中使用 Tamagui 添加全局样式

Question

使用Tamagui主题，有没有办法设置全局按钮样式？

我有一个使用 Tamagui 设计系统的反应原生（世博）应用程序，并且希望能够在我的主题中设置按钮样式。

我目前有一个如下所示的主题，我可以在其中设置某些属性，即

backgroundHover

，但我在 tamagui 的文档中找不到这些道具的完整列表。

像

backgroundPress

这样的东西可以用于设置全局背景按下样式，我可以使用它来设计按钮的样式，但我想这也适用于具有 onPress 的其他组件？

我查看了设置

background

但这默认情况下将所有组件背景设置为该颜色。

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,
  backgroundHover: tokens.color.primary,
  backgroundPress: defaultTokens.color.pink6Light,
  backgroundFocus: tokens.color.white,
  borderColor: tokens.color.lavender_pink,
  borderColorHover: tokens.color.white,
  colorHover: tokens.color.white,
  colorPress: defaultTokens.color.pink6Light,
  colorFocus: tokens.color.white,
  shadowColor: defaultTokens.color.gray12Light,
  shadowColorHover: tokens.color.white,
})
export default myTheme;

有没有办法只为主题内的按钮设置全局样式，或者我只需要创建一个新的按钮组件并使用

styled()

函数，然后在需要时导入该按钮？

Answer 1

正如我从你的问题中得到的，你需要为 tamagui Button 设置默认样式，你可以这样设置按钮样式：

// tamagui.config.ts
const config = createTamagui({
  themes: {
    ...tamaguiThemes,
    light_Button: {
      background: "#232323",
      backgroundFocus: "#424242",
      backgroundHover: "#282828",
      backgroundPress: "#323232",
      backgroundStrong: "#191919",
      backgroundTransparent: "#151515",
      borderColor: "red",
      borderColorFocus: "red",
      borderColorHover: "transparent",
      borderColorPress: "red",
      color: "#fff",
      colorFocus: "#a5a5a5",
      colorHover: "#a5a5a5",
      colorPress: "#fff",
      colorTransparent: "#a5a5a5",
      placeholderColor: "#424242",
    },
  },
});

鉴于你的主题很轻松

Answer 2

网上关于tamagui修改默认主题的资料很少。 您可以通过打印 configBase.themes 来获取特定组件的代码。

import {config as configBase} from '@tamagui/config/v3'
import {createTamagui} from 'tamagui'


export const config = createTamagui({
    ...configBase,
    themes: {
        ...configBase.themes,
        light_Button: {
            background: "#000",
            backgroundFocus: "#424242",
            backgroundHover: "#282828",
            backgroundPress: "#323232",
            backgroundStrong: "#191919",
            backgroundTransparent: "#151515",
            borderColor: "red",
            borderColorFocus: "red",
            borderColorHover: "transparent",
            borderColorPress: "red",
            color: "#fff",
            colorFocus: "#a5a5a5",
            colorHover: "#a5a5a5",
            colorPress: "#fff",
            colorTransparent: "#a5a5a5",
            placeholderColor: "#424242",
        },
    }
})

export default config

export type Conf = typeof config

declare module 'tamagui' {
    interface TamaguiCustomConfig extends Conf {
    }
}