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>
);
}
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 ⬇️
.
