This lesson focuses on migrating a slots alert recipe to a config recipe. migration lessons.
Create a new file named alert.recipe.ts
and move the existing alert recipe into this file.
Use the defineSlotRecipe
function for slot recipes
import { defineSlotRecipe } from '@pandacss/dev'
Add a className
to the recipe to resolve the TypeScript error
className: 'alert'
Import the alert recipe into your panda.config
file
import { alertRecipe } from './alert.recipe'
Also, add a recipes property to the config and include the alert recipe
recipes: {
alert: alertRecipe
}
Run panda codegen
and restart the development server
Import the alert recipe from styled-system/recipes
import { alert } from 'styled-system/recipes'
Replace existing alert recipe references with the new import.
Check the DOM to compare the previous atomic alert recipe and the new config recipe.