Handling dynamic styling in recipes

January 3, 2025

Suppose that you need to change the padding of a button based on some pressed state.

const App = () => {  const [isPressed, setPressed] = useState(false)  // How do style the button separately based on the pressed state?  return <Button>Click Me</Button> }

You might be tempted to do something like this:

import { defineRecipe } from "@chakra-ui/react"  export const buttonRecipe = defineRecipe({  base: {  display: "flex",  },  variants: {  size: {  sm: ({ isPressed }) => ({  padding: isPressed ? "8" : "4",  fontSize: "12px",  }),  },  }, })

This doesn't work because Chakra doesn't support functions in recipes. We require recipes to be serializable.

There are two ways to handle this:

Using `data-*` attributes

First, apply the dynamic values to the component using the data-* attribute.

const App = () => {  const [isPressed, setPressed] = useState(false)  return <Button data-pressed={isPressed || undefined}>Click Me</Button> }

Next, style the recipe using the data-* attribute.

export const buttonRecipe = defineRecipe({  base: {  display: "flex",  },  variants: {  size: {  sm: {  padding: "4",  fontSize: "12px",  "&[data-pressed]": {  padding: "8",  },  },  },  }, })

Using `compoundVariants`

Compound variants allow you to create style overrides based on variant combinations.

First, create a isActive variant
Next, create a compoundVariants array that contains the style overrides

import { defineRecipe } from "@chakra-ui/react"  export const buttonRecipe = defineRecipe({  base: {  display: "flex",  },  variants: {  size: {  sm: {  padding: "4",  fontSize: "12px",  },  },  isPressed: {  true: {},  false: {},  },  },  compoundVariants: [  {  size: "sm",  isPressed: true,  css: {  padding: "8px",  fontSize: "12px",  },  },  ], })

Then, you can pass the isPressed variant to the component as props.

<Button visual="solid" isPressed={isPressed}>  Click Me </Button>

note

If you use TypeScript, don't forget to run the npx @chakra-ui/cli typegen command to generate the types for the recipe.