Search code examples
cssvaadinvaadin-flowtheming

Can I disable vaadin flow theeming and apply ordinary css

Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.

Thank you

Solution

  • You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:

    [part="input-field"] {
    background-color: var(--lumo-base-color);
    max-width: fit-content;
}

    To set the colors for a disabled button, you can target it as follows:
    filename: vaadin-button.css
    code:

    :host([theme~='primary'][disabled]) {
    background-color: red;
}

    And you get the following:
    enter image description here

    To change the primary color or any other global styling, explore your styles.css file.

    For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming