Conditional Styles

When writing styles, you might need to apply specific changes depending on a specific condition, whether it's based on breakpoint, css pseudo state, media query or custom data attributes.

Bamboo allows you to write conditional styles, and provides common condition shortcuts to make your life easier. Let's say you want to change the background color of a button when it's hovered. You can do it like this:

<button
  className={css({
    bg: 'red.500',
    _hover: { bg: 'red.700' },
  })}
>
  Hover me
</button>

Overview

Property based condition

This works great, but might be a bit verbose. You can apply the condition _hover directly to the bg property, leading to a more concise syntax:

<button
  className={css({
-   bg: 'red.500',
-   _hover: { bg: 'red.700' }
+   bg: { base: 'red.500', _hover: 'red.700' }
  })}
>
  Hover me
</button>

Nested condition

Conditions in Bamboo can be nested, which means you can apply multiple conditions to a single property or another condition.

Let's say you want to change the background color of a button when it's focused and hovered. You can do it like this:

<button
  className={css({
    bg: { base: 'red.500', _hover: { _focus: 'red.700' } },
  })}
>
  Hover me
</button>

Built-in conditions

Bamboo includes a set of common pseudo states that you can use to style your components:

• Pseudo Class: _hover, _active, _focus, _focusVisible, _focusWithin, _disabled
• Pseudo Element: _before, _after
• Media Query: sm, md, lg, xl, 2xl
• Data Attribute Selector: _horizontal, _vertical, _portrait, _landscape

Arbitrary selectors

What if you need a one-off selector that is not defined in your config's conditions? You can use the css function to generate classes for arbitrary selectors:

import { css } from '../styled-system/css'
 
const App = () => {
  return (
    <div
      className={css({
        '&[data-state=closed]': { color: 'red.300' },
        '& > *': { margin: '2' },
      })}
    />
  )
}

This also works with the supported at-rules (@media, @layer, @container, @supports, and @page):

import { css } from '../styled-system/css'
 
const App = () => {
  return (
    <div className={css({ display: 'flex', containerType: 'size' })}>
      <div
        className={css({
          '@media (min-width: 768px)': {
            color: 'red.300',
          },
          '@container (min-width: 10px)': {
            color: 'green.300',
          },
          '@supports (display: flex)': {
            fontSize: '3xl',
            color: 'blue.300',
          },
        })}
      />
    </div>
  )
}

Pseudo Classes

Every pseudo class in the Reference has a _ modifier that works like the _hover above — _active, _focus, _disabled, _first, _last, _even, _odd, and so on:

<table>
  <tbody>
    {items.map((item) => (
      <tr
        key={item}
        className={css({
          _even: { bg: 'gray.100' },
          _odd: { bg: 'white' },
        })}
      >
        <td>{item}</td>
      </tr>
    ))}
  </tbody>
</table>

Pseudo Elements

Before and After

You can style the ::before and ::after pseudo elements of an element using their _before and _after modifier:

<div
  className={css({
    _before: { content: '"👋"' },
  })}
>
  Hello
</div>

Notes

• Before and After: Ensure you wrap the content value in double quotes.
• Mixing with Conditions: When using condition and pseudo elements, prefer to place the condition before the pseudo element.

css({
  // This works ✅
  _dark: { _backdrop: { color: 'red' } },
  // This doesn't work ❌
  _backdrop: { _dark: { color: 'red' } },
})

The reason _backdrop: { _dark: { color: 'red' } } doesn't work is because it generated an invalid CSS structure that looks like:

&::backdrop {
  &.dark,
  .dark & {
    color: red;
  }
}

Placeholder

Style the placeholder text of any input or textarea using the _placeholder modifier:

<input
  placeholder="Enter your name"
  className={css({
    _placeholder: { color: 'gray.500' },
  })}
/>

File Inputs

Style the file input button using the _file modifier:

<input
  type="file"
  className={css({
    _file: { bg: 'gray.500', px: '4', py: '2', marginEnd: '3' },
  })}
/>

Media Queries

User-preference media features have _ modifiers of their own, and compose like any other condition:

<div
  className={css({
    bg: 'white',
    _osDark: { bg: 'black' },
    _motionReduce: { transition: 'none' },
  })}
>
  Hello
</div>

Group Selectors

When you need to style an element based on its parent element's state or attribute, you can add the group class to the parent element, and use any of the _group* modifiers on the child element.

<div className="group">
  <p className={css({ _groupHover: { bg: 'red.500' } })}>Hover me</p>
</div>

This modifer for every pseudo class modifiers like _groupHover, _groupActive, _groupFocus, and _groupDisabled, etc.

Sibling Selectors

When you need to style an element based on its sibling element's state or attribute, you can add the peer class to the sibling element, and use any of the _peer* modifiers on the target element.

<div>
  <p className="peer">Hover me</p>
  <p className={css({ _peerHover: { bg: 'red.500' } })}>I'll change by bg</p>
</div>

Data Attribute

LTR and RTL

You can style an element based on the direction of the text using the _ltr and _rtl modifiers:

<div dir="ltr">
  <div
    className={css({
      _ltr: { ml: '3' },
      _rtl: { mr: '3' },
    })}
  >
    Hello
  </div>
</div>

For this to work, you need to set the dir attribute on the parent element. In most cases,you can set this on the html element.

State

You can style an element based on its data-{state} attribute using the corresponding _{state} modifier:

<div
  data-loading
  className={css({
    _loading: { bg: 'gray.500' },
  })}
>
  Hello
</div>

This also works for common states like data-active, data-disabled, data-focus, data-hover, data-invalid, data-required, and data-valid.

<div
  data-active
  className={css({
    _active: { bg: 'gray.500' },
  })}
>
  Hello
</div>

Orientation

You can style an element based on its data-orientation attribute using the _horizontal and _vertical modifiers:

<div
  data-orientation="horizontal"
  className={css({
    _horizontal: { bg: 'red.500' },
    _vertical: { bg: 'blue.500' },
  })}
>
  Hello
</div>

ARIA Attribute

You can style an element based on its aria-{state}=true attribute using the corresponding _{state} modifier:

<div
  aria-expanded="true"
  className={css({
    _expanded: { bg: 'gray.500' },
  })}
>
  Hello
</div>

Container queries

You can define container names and sizes in your theme configuration and use them in your styles.

export default defineConfig({
  // ...
  theme: {
    extend: {
      containerNames: ['sidebar', 'content'],
      containerSizes: {
        xs: '40em',
        sm: '60em',
        md: '80em',
      },
    },
  },
})

The default container sizes in the @bamboocss/preset-bamboo preset are shown below:

export const containerSizes = {
  xs: '320px',
  sm: '384px',
  md: '448px',
  lg: '512px',
  xl: '576px',
  '2xl': '672px',
  '3xl': '768px',
  '4xl': '896px',
  '5xl': '1024px',
  '6xl': '1152px',
  '7xl': '1280px',
  '8xl': '1440px',
}

Then use them in your styles by referencing using @<container-name>/<container-size> syntax:

import { css } from '/styled-system/css'
 
function Demo() {
  return (
    <nav className={css({ containerType: 'inline-size' })}>
      <div
        className={css({
          fontSize: { '@/sm': 'md' }
        })}
      />
    </nav>
  )
}

This will generate the following CSS:

.cq-t_inline-size {
  container-type: inline-size;
}
 
@container (inline-size >= 60rem) {
  .\@\/sm\:fs_md {
    font-size: var(--font-sizes-md);
  }
}

Container sizes carry the same range set as breakpoints. Alongside @/sm, which is open-ended upwards, you get @/smOnly for that size alone, @/smDown for everything below it, and @/smToLg for a span:

@container (inline-size >= 30em) { … }                            /* @/sm     */
@container (inline-size >= 30em) and (inline-size < 40em) { … }   /* @/smOnly */
@container (inline-size < 30em) { … }                             /* @/smDown */

As with breakpoints, the upper bound is exclusive, so @/smOnly stops exactly where @/md starts.

You can also named container queries:

import { css } from 'styled-system/css'
 
function Demo() {
  return (
    <nav className={css({ containerType: 'inline-size', containerName: 'sidebar' })}>
      <div
        className={css({
          fontSize: { base: 'lg', '@sidebar/sm': 'md' }
        })}
      />
    </nav>
  )
}

Reference

Here's a list of all the condition shortcuts you can use in Bamboo:

Custom conditions

Bamboo lets you create your own conditions, so you're not limited to the ones in the default preset. Learn more about customizing conditions here.