How to use the NativeBase theming functionality to make different header variants?

Question

I'm trying to create a variant to scale the fontSize of Heading in NativeBase.

The following does not work.

const theme = extendTheme({
  components: {
    Heading: {
      variants: {
        h2: {
          fontSize: {
            base: 'xs',
            sm: 'xs',
            md: 'sm',
            lg: 'sm',
            xl: 'md',
          },
        },
      },
    },
  },
});

Nothing changes in...

<Heading variant="h2">Some Header Text</Heading>

What is the correct way to make a scalable Heading component?

Answer 1

So here, Variant will be resolved first and then sizes will be resolved. So fontSize from size will override fontSize from variant. You can follow the below approach to apply size to your heading.

export const Example = () => {
  const theme = extendTheme({
    components: {
      Heading: {
        sizes: {
          myCustomSize: {
            fontSize: { base: 'lg', md: '2xl', lg: '3xl' },
          },
        },
        defaultProps: {
          size: 'myCustomSize',
        },
        variants: {
          h1: {
            _light: {
              color: 'red.500',
            },
            _dark: {
              color: 'amber.500',
            },
          },
        },
      },
    },
  });