Nativebase如何在不使用colorScheme的情况下自定义主题中的Button颜色？答案

【问题标题】：Nativebase how to customize Button color in theme without using colorScheme?Nativebase如何在不使用colorScheme的情况下自定义主题中的Button颜色？
【发布时间】：2022-09-27 23:31:33
【问题描述】：

我真的为这个简单的事情而挣扎。

默认情况下，按钮颜色为primary.600，我只想将其调整为primary.400，这似乎更明显，因为这是真正的原色。

由于几乎没有这方面的文档，遗憾的是没有使用打字稿的 IDE 自动完成功能，我在问你如何解决这个问题

这是我到目前为止所尝试的：

export const theme = extendTheme({
    components: {
        Button: {
            // I tried this after checking directly in ts file for extendTheme implementation
            baseStyle: () => ({
                bg: \'red.500\',
                backgroundColor: \'red.500\',
            })
            // as well as
            baseStyle:  {
                bg: \'red.500\',
                backgroundColor: \'red.500\',
            }
            // also tried with hex colors with no success
        },
        // Also tried the code in this example: https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L72 with no success
        variants: {
            solid(props: Dict) {
                const { colorScheme: c } = props;
                let bg = `${c}.400`
                bg = mode(bg, `${c}.400`)(props);
                if (props.isDisabled) {
                    bg = mode(`muted.300`, `muted.500`)(props);
                }

                const styleObject = {
                    _web: {
                        outlineWidth: 0,
                    },
                    bg,
                    _hover: {
                        bg: mode(`${c}.600`, `${c}.500`)(props),
                    },
                    _pressed: {
                        bg: mode(`${c}.700`, `${c}.600`)(props),
                    },
                };

                return styleObject;
            }
    }
});

还尝试了此示例中的代码：https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L72 没有成功

标签： react-native native-base theming

【解决方案1】：

  baseStyle: {
    rounded: 'md',
    bg: '#ffcc00',
    backgroundColor: '#fc0',
  },

使用 bg 和 backgroundColor 似乎工作

【讨论】：