Docs

Docs

Styling Components with CSS

How to add CSS styles to views and React components in Hilla applications.

You can import CSS files directly, either plain files or CSS modules, with the import() method. You can place the files anywhere in your application. The sample below has them in views folder for simplicity.

import './HelloWorld.css';
import css from './HelloWorld.module.css';

Using CSS Variables

Hilla uses the Vaadin Lumo theme as a base for component and application styling. Lumo is based on a set of CSS custom properties (variables) that you can use to achieve a consistent look and feel across applications. You can find the properties in the Vaadin styling documentation:

You can use the variables in place of hard-coded units using var().

.card {
  border: 1px solid var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-s);
  box-shadow: var(--lumo-box-shadow-s);
}