'Is there a way to override all base defaultProps at once in NativeBase components?

New to NativeBase and using version 3.4.1.

We're quickly finding that we prefer the "xl" size for icons and text.
Is there an easier way to set all font sizes to xl without overriding every single component?

Currently we're following the docs and overriding defaultProps like this...

import { extendTheme } from 'native-base';

export const ExtendedNativeBaseTheme = extendTheme({
  
  components: {
    Button: {
      defaultProps: {
        size: 'xl',
      },
    },
    Checkbox: {
      defaultProps: {
        _text: {
          fontSize: 'xl',
        },
      },
    },
    Input: {
      defaultProps: {
        size: 'xl',
      },
    },
    Icon: {
      defaultProps: {
        size: 'xl',
      },
    },
    IconButton: {
      defaultProps: {
        _icon: {
          size: 'xl',
        },
      },
    },
    Text: {
      defaultProps: {
        fontSize: 'xl',
      },
    },
  },
});

Solution 1:^[1]

The withDefaultSize Theme Extension is what you want.

Modifying the example from their docs:

import { extendTheme, withDefaultSize } from '@chakra-ui/react'

const customTheme = extendTheme(
  withDefaultSize({
    size: 'xl',
    components: ['Button', 'Checkbox', 'Icon', ...],
  }),
)

All you would need to do is to list all components that need size xl in the components property

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	IB3N

'Is there a way to override all base defaultProps at once in NativeBase components?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]