v2.1.0.mdx

title	description	releaseUrl	releaseDate	version
Version 2.1.0	Explore the changelog for Chakra UI version 2.1.0. Learn about the latest features, bug fixes, and improvements.	chakra-ui#6044	May 22, 2022	2.1.0

Minor Changes

Styled System 2.1.0

• Add support for responsive variants and sizes

  <Button variant={["sm", "lg"]}>Click me</Button>

• Add support for !important in token values as an escape hatch for overriding properties in responsive variants/sizes.

  <Button variant={["sm", "lg"]} fontSize="lg !important">
    Click me
  </Button>

  Notes

  • Based on how this is designed, there's no support for responsive colorScheme since it is technically not a variant
  • When using responsive sizes and variants, overriding properties via props might not work as expected. We use native CSS media queries to enable this feature so there's no "magic" under the hood. If you really want to override properties, you can consider using the important syntax

Patch Changes

All components

• Ensure types used by other chakra packages are properly exported and imported so that src directory is not referenced in the emitted type declarations.

Avatar 2.0.1

• Add referrerPolicy prop

Image 2.0.1

• Add referrerPolicy prop

Focus Lock 2.0.1

• Upgrade dependency react-focus-lock to be compatible with React 18

Media Query 3.0.1

• Fix regression in use-media-query hook in SSR envrionments where it throws hydration mismatch

Textarea 2.0.1

• Fix ESLint warnings and errors

Theme 2.0.2

• Tag component variants borderRadius was overwriting baseStyle eventhough borderRadius was same for all variants. borderRadius is now part of the baseStyle

Toast 2.0.3

• Fix regression with the default toast position. It now defaults to bottom as described in docs