Panda CSS Conditions

Conditions in Panda allow you to change styles depending on specific states or situations.

For example, if I want to style an SVG element specifically, I can create a condition in the Panda config file.

 import { defineConfig } from '@pandacss/dev' export default defineConfig({ conditions: { extend: { icon: "& > svg" }, }, }); 

To use this condition, I prefix it with an underscore.

 function App() { return ( <div className={css({ _icon: { color: '#CDCDCD', }, })} > Conditions in Panda </div> ); } 

This tells Panda only to apply that style when that specific condition is true.

Learn more about Panda CSS with my crash course ⬇️

.