Styling a Label component

Flow
1

Hi all,

First post here. I’m having some major difficulty in Vaadin 14 in getting a label component to inherit the styles in “test1.css”. I haven’t really been able to find any documentation online to support adding styles to a component like this other than label.getStyle().set("font-weight", "bold");

Code below:

test1.css

:host {
    border: 1px solid gray;
    font-weight: bold;
}

PropertyRow.java

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;

@CssImport(value = "./styles/test1.css", id = "someid", themeFor = "v-label")
public class PropertyRow extends HorizontalLayout {

    private String label;
    private Component item;

    public PropertyRow(String label, Component item) {
        this.label = label;
        this.item = item;

        item.setId(label);
        Label l = new Label(label);
        l.addClassName("someid");
        add(l);
        add(item);
    }

}
2

Hi!

The Label component corresponds to the native <label> element in the DOM. There’s no v-label or vaadin-label component.

Also, you’re extending HorizontalLayout and placing the label and the item inside it directly, into the light DOM (vs shadow DOM). Therefore, you don’t need to use the themeFor attribute in the @CssImport annotation. The id attribute is only needed if you are creating a reusable style sheet which you would want to include in multiple components or style scopes.

Remove the themeFor and id from the annotation, and change your CSS selector from :host to label and it should work.

3

Improvements to the themes and styling documentation are under development. Hopefully those will clarify these things.

4

Jouni Koivuviita:
Hi!

The Label component corresponds to the native <label> element in the DOM. There’s no v-label or vaadin-label component.

Also, you’re extending HorizontalLayout and placing the label and the item inside it directly, into the light DOM (vs shadow DOM). Therefore, you don’t need to use the themeFor attribute in the @CssImport annotation. The id attribute is only needed if you are creating a reusable style sheet which you would want to include in multiple components or style scopes.

Remove the themeFor and id from the annotation, and change your CSS selector from :host to label and it should work.

Thank you for the response. I’ve changed :host to label, and removed the annotation fields, however, I’m a bit unsure of how to scope this CssImport to only the labels inside of the Java file importing it. I was under the impression that after setting an id in the annotation, I’d be able to link this style with any label that I add label.addClassName("someId"); to. I’ve tried this and it doesn’t produce any stylings after adding the id.

Code for reference:

(test1.css)

label {
    font-weight: bold;
    background: red;
}

(Produces global label styles)

@CssImport(value = "./styles/test1.css")
public class PropertyRow extends HorizontalLayout {

    public PropertyRow(String label, Component item) {
        item.setId(label);
        Label l = new Label(label);
        add(l);
        add(item);
    }

}

(Produces no styles)

@CssImport(value = "./styles/test1.css", id = "propsId")
public class PropertyRow extends HorizontalLayout {

    public PropertyRow(String label, Component item) {
        item.setId(label);
        Label l = new Label(label);
        l.addClassName("propsId");
        add(l);
        add(item);
    }

}

Perhaps I’m misunderstanding how to scope certain styles.

5

Hi Chris,

You can use the propsId class name;

label.propsId {
  background: red;
  font-weight: bold;
}