Search code examples
react-nativeinputthemesnative-base

Change font size in NativeBase theme for input component


I use NativeBase Input Component and Costume Theme, I tried to change the font size of the input component in my costume theme I already tried to change it in the following examples, but it doesn't change.

How can I change the font size of the input component in my costume theme?

Example 1:

const themeOne = extendTheme({
  components: {
    Input: {
      baseStyle: {
        style: { color: "white", fontSize: "20" },
      },
    },
  },
});

Example 2:

const themeOne = extendTheme({
  components: {
    Input: {
      baseStyle: {
        style: { color: "white"},
        fontSize: "20",
      },
    },
  },
});

Solution

  • You can use defaultProps. Read more about customizing Input component.

    const theme = extendTheme({
        components: {
          Input: {
            baseStyle: {
              color: 'red.400',
            },
            defaultProps: { size: '2xl' },
          },
        },
      });