Vaadin CSS styling

Hi, what is the difference between setId, addClassName and setClassName. I want to have one css file for one view with its components which have their css files as well. My issue is that when I have for example Button and name it (“button”) and then In another css I have the same name for different button they are influencing each other. How to prevent this ?

Here is vaadins documentation about [Scoping Component Styles]
(https://vaadin.com/docs/v14/themes/styling-components.html#scoping-component-styles).

You can either use different and more specific namings for your button classes, or you could also make use of the fact that you can apply a theme name to some of your buttons.

@CssImport(value = "./styles/custom-button.css", themeFor = "vaadin-button")
public class CustomButton extends Button {
	public CustomButton() {
		super();
		addThemeName("custom-button")
	}
	// TODO: implement all constructor overloads of Button class
}
// custom-button.css
:host([theme~="custom-button"]
) {
	color: purple;
}

Thanks for quick answer, if I may ask one more question. I am currently styling vaadin upload button but I would prefer a different text colour I managed to access it’s part called “primary buttons” as CssImport(“…”, themeFor = “vaadin-upload”) but the “primary buttons” part has 2 sub divs where in one of them lies my desired button which I want to change.


18537673.png

When these webcomponents are nested within each other, it can usually be done with overriding the custom css variables that are already being used for most stylings.
Reason: You have no access to the actual button in Java, only to the upload - its parent. Therefore we need something that will be inherited by its child webcomponents. This is the case with custom CSS variables. You could also try to do something similar using theme attribute, since that also is inherited.

In this case, I believe if you have already a css to be used with themeFor="vaadin-upload" you can change the font color of the button using this:

:host {
	--_lumo-button-color: #YOUR_TEXT_COLOR;
}

Warning, the above code would again apply to ALL of your vaadin-uploads within the application. Here, you can again fix this by giving the one upload that you want to change it’s own theme name, to separate it from “normal” uploads.

@CssImport(value = "./styles/custom-upload.css", themeFor = "vaadin-upload")
public class CustomUpload extends Upload {
	public CustomButton() {
		super();
		addThemeName("custom-upload")
	}
	// TODO: implement all constructor overloads of Upload class
}
// custom-upload.css
:host([theme~="custom-upload"]
) {
	--_lumo-button-color: #YOUR_TEXT_COLOR;
}

Kaspar Scherrer:
When these webcomponents are nested within each other, it can usually be done with overriding the custom css variables that are already being used for most stylings.

In this case, I believe if you have already a css to be used with themeFor="vaadin-upload" you can change the font color of the button using this:

:host {
	--lumo-primary-text-color: #YOUR_TEXT_COLOR;
}

Warning, the above code would again apply to ALL of your vaadin-uploads within the application. Here, you can again fix this by giving the one upload that you want to change it’s own theme name, to separate it from “normal” uploads.

@CssImport(value = "./styles/custom-upload.css", themeFor = "vaadin-upload")
public class CustomUpload extends Upload {
	public CustomButton() {
		super();
		addThemeName("custom-upload")
	}
	// TODO: implement all constructor overloads of Upload class
}
// custom-upload.css
:host([theme~="custom-upload"]

) {

–lumo-primary-text-color: #YOUR_TEXT_COLOR;
}

Thank you it worked.

But where do I find names for these variables ? What if I want to change it’s border also ? And one last thing I am using custom css for vaadin-text-field with background set to transparent but for some reason when I switch textfield with “Tab” it has some sort of blue border around it I don;t know why is this happenig do you have any clue ?

EDIT 1:
But what if I want to change cursor type also because I like my buttons to show cursor pointer on hover but if I have only these custom variables it might limit the options for me.

Peter Vecera:
But where do I find names for these variables ? What if I want to change it’s border also ? And one last thing I am using custom css for vaadin-text-field with background set to transparent but for some reason when I switch textfield with “Tab” it has some sort of blue border around it I don;t know why is this happenig do you have any clue ?

EDIT 1:
But what if I want to change cursor type also because I like my buttons to show cursor pointer on hover but if I have only these custom variables it might limit the options for me.

  1. How do I find these variables?
    By inspecting the component in the browser with dev tools:
    ![browser inspection of component using devtools]
    (https://i.imgur.com/sUxIEYM.png)

  2. What if there is no such variable already being used for a certain CSS property that I need?
    Then you can actually introduce your own! Let’s take the example of changing the cursor of buttons within vaadin-upload components:

2.1: in your shared-styles.css where you define your global CSS rules (that are not specific for shadow root components), define a new custom CSS variable and set the value to the one that is already being used on your original button. In above screenshot we see the value for cursor on vaadin-buttons is default.

html {
	--vaadin-upload-button-cursor: default;
}

2.2: Override the cursor definition of ALL vaadin-buttons to use your new custom property:

:host {
	cursor: var(--vaadin-upload-button-cursor, default) !important;
}

And import this css on your MainView with @CssImport(value = "./styles/button-cursor.css", themeFor = "vaadin-button")

2.3 Now change the variable value within your vaadin-upload

:host {
	--vaadin-upload-button-cursor: wait !important;
}

by importing this css on your MainView with @CssImport(value = "./styles/upload-waiting-cursor.css", themeFor = "vaadin-upload")