Search code examples
chakra-ui

Chakra UI Tag Multi-part component styling


I'm trying to style the Chakra UI Tag component, but only the styles for the container part work. Why is the styling for the label part not working?

baseStyle: {
    container: {
      bg: 'red',
    },
    label: {
      color: 'white',
      lineHeight: 3
    }
  },

Solution

  • Based on docs, there is default variant set to "subtle". If you're using default variant, you probably have to change default style (baseStyle) for that variant (because variant styles overrides baseStyle) =>

    Tag: {
     variants: {
      subtle: {
       "your default style code here"
      },
     },
    },