Getting typescript error with extendTheme

I am using styled-component and extendTheme together. The typescript definition is giving error when using with extendTheme.

Here is the error screenshot

Here is how I am defining radii

import { Theme, ObjectOrArray } from 'styled-system';
import { extendTheme } from '@chakra-ui/react';

const radii: ObjectOrArray<CSS.BorderRadiusProperty<string>> = {
  // chakra values
  none: '0',
  sm: '0.125rem',
  md: '0.25rem',
  lg: '0.5rem',
  xl: '0.75rem',
  '2xl': '1rem',
  '3xl': '1.25rem',
  full: '9999px'
};

const theme: ITheme = extendTheme({
  useSystemColorMode: false,
  breakpoints,
  colors,
  radii,
  opacity,
  borders,
  zIndices,
  sizes,
  ...typography,
  forms,
  icons: {
    ...icons
  }
});
`

Hi @jitender.chand1

Welcome to the Community!

These typescript errors when using a non-Frontity method should be checked with the source documentation (chakra-ui in your case)

I recommend you:

  • to check the types for that method in the original source code
  • check the Chakra UI docs
  • ask in the Chakra UI community about this error

Hope this helps