Styling Views & Layouts with CSS
How to add CSS styles to views and React components in Hilla applications.
CSS Theme Folder
You can style components that extend View
and Layout
by placing CSS files in the frontend/themes/<app-name>/
folder and importing them in styles.css
using import()
.
Styles defined in the theme directory are available across the application.
You can also import styles from node_modules
, like line-awesome
in the following example:
@import "line-awesome/dist/line-awesome/css/line-awesome.min.css";
@import "./main-layout.css";
@import "./views/example-view.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);
}