conditional styles

[marhalpert]

Hi Guys,

I can't find any documentation around conditional styles.

I have used classnames in the past to add different styles to react components based on props/state.

That is the best way to achieve this in theme-ui?

thanks!

[hasparus]

If you want a visually different kind of component, I'd use Variants.
If you need a small change of style resulting from small change of props/state, I'd use sx prop.

/** @jsx jsx */
import { jsx } from 'theme-ui';

export const Foo = () => {
  const [state, setState] = useState(0);
  
  return (
    <button
      sx={{ background: state % 2 === 0 ? 'lightsalmon' : 'darksalmon' }}
      onClick={() => setState(s => s + 1)}
    >
      +
    </button>
  )
}

Remember that sx prop generates a new classname, so when there's a lot of possible states (e.g. slider), help yourself with inline style prop.