Customizing single components for Chakra UI

Khalid Khan

This code snippet is used to create your own custom component styles in Chakra UI. A component style consists of baseStyle, sizes, variants and an optional defaultProps to denote the default size or variant.

Use this code snippet and create your own custom component styles.

Library: @chakra-ui/react

Shortcut: chakra.customcomponentstyle

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

const ComponentStyle = {
  style //style object for base or default style
  baseStyle: {},
  size //styles for different sizes ("sm", "md", "lg")
  sizes: {},
  visual //styles for different visual variants ("outline", "solid")
  variants: {},
  default//default values for `size` and `variant`
  defaultProps: {
    size: '',
    variant: '',
  },
}