Disable the default theme in a non-Hilla project using Hilla React components?

Hilla
1

I would like to use Hilla React components in a non-Hilla project. This is just a React frontend project. Is it possible to completely disable the default theme (Lumo) for all components? I need to be able to write the theme from scratch.

Ideally, is there a way to simply use a component without any extra features? It seems that, as soon as a Hilla component is rendered, a bunch of stuff is added to the head.

I tried removing all elements in the head by [id^="lumo-"], but now the overlay always shows above the input, even when there is space below:

useEffect(
    (): void => {
      document.head.querySelectorAll('[id^="lumo-"]')
          .forEach((element: Element): void => {
            element.remove();
          });
    },
    []
);

image

Thank you.

2

Hi, the Vaadin React wrappers currently import Lumo-styled components by default. To avoid this, you can add a Vite config that aliases the root-level web component imports to the unstyled versions under src.

Example:

resolve: {
  alias: {
    '@vaadin/button/vaadin-button.js': '@vaadin/button/src/vaadin-button.js',
  },
},
5 Likes
3

Thanks Tomi, this is exactly what I needed.

1 Like