Nested styles and Conditions

A general rule of thumb when using Panda is that nested styles and pseudo state selectors must use the “&” symbol.

css({ '&:hover': { bg: '#313131' } })
css({ '&:focus': { outline: '2px solid #ACACAC', outlineOffset: '2px' } })

Panda provides built-in conditions that map to pseudo-state selectors using underscore.

css({ _hover: { bg: '#313131' } })
css({ _focus: { outline: '2px solid #ACACAC', outlineOffset: '2px' } })

This way, your code is shorter, more concise.

To change the color of an element such as an icon svg, we use the child selector like this:

css({ '& > svg': { color: '#CDCDCD' } })

While this works, the classname in the DOM shows up quite long. With conditional styles however, you can shorten classnames.

In your panda.config file, set up a condition called "icon":

conditions: {
  extend: {
    icon: '& > svg'
  }
}

With the condition defined, you can now reference it in your code:

css({
  _icon: { color: '#CDCDCD' },
})

Locked Video