Can I disable vaadin flow theeming and apply ordinary css-CodePudding

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

CodePudding user response：

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:

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

CodePudding user response：

Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.