LEDA1.3.10

Styles

Default styles

Leda has some default styles so it is ready to use immediately.

import 'leda/dist/styles/leda.base.css';

There are a few ways to change styles:

Variables

css variables list

Each component has it's own set of variables covering every numeric or color value. So you can create your own variables file to change the way all components look.

Just add it after default styles import:

import 'leda/dist/styles/leda.base.css';
import 'your-variables.css';

Theme

Each Form and Layout component exposes a theme prop.

It lets you add your own css-classes to any component's element.

In this site we use Tailwind utility classes:


<L.Button
  theme={{
    wrapper: 'ld-btn bg-sky-500 border-sky-600',
  }}
>
  Click me
</L.Div>