Styles

Default styles

For rapid development you can use dafault Leda styles and enhance it later.

First import or copy the css file into your project.

import ledaStyles from 'leda/dist/styles/leda.light.css';

Then modify the file or add new css to rewrite the default styles.

All components on this site are styled by the default css.

<L.Button
  isDisabled
>
  Click me
</L.Div>
        

Theme

Each Form and Layout component exposes a theme prop.

It gives access to css classes of a component.

E.g. Button component has a few css classes:

button-wrapper with basic component styles

disabled for the disabled state

and more, see the docs for the Button component.

The classes can be replaced/augmented as follows (in this site we use Tailwind utility classes):

<L.Button
  theme={{
    wrapper: 'pt-2 pb-1 px-4 bg-sky-100 border border-sky-300 hover:border-sky-200 text-sky-500 rounded-md text-xs',
    disabled: 'bg-stone-100 border-stone-300 hover:border-stone-200 text-stone-500 cursor-not-allowed'
  }}
  isDisabled
>
  Click me
</L.Div>
        

The code above changes default classes for one component. To apply changes globally use Leda provider:

<L.Leda
  theme={{
    button: {
      wrapper: 'pt-2 pb-1 px-4 bg-orange-100 border border-orange-300 hover:border-orange-200 text-orange-500 rounded-md text-xs',
      disabled: 'bg-stone-100 border-stone-300 hover:border-stone-200 text-stone-500 cursor-not-allowed'
    }
  }}
>
  <L.Button
    isDisabled
  >
    Click me harder
  </L.Button>
</L.leda>