CSS classes props

Each Leda component can have an attribute/attributes starting with _.

It is transformed to a css class so you can write:


() => {
  const [isColored, setIsColored] = React.useState(false)
  const [isLarge, setIsLarge] = React.useState(false)

  return (
    <>
      <L.Div
        _mb-4
        _text-sky-600={isColored}
        _text-xl={isLarge}
      >
        Hello world!
      </Div>

      <L.Button
        onClick={() => setIsColored(!isColored)}
      >
        Toggle color
      </Button>
      
      <L.Button
        onClick={() => setIsLarge(!isLarge)}
        _ml-2
      >
        Toggle size
      </Button>
    </>
  );
}

Leda components can have both className and _your-class-name props.