change style of a Label of a Component

Flow
2

Hi! With Vaadin 10+, all components are implemented on he Web Component standards, and as such have different rules for styling. If you have a shared-styles.html file already in your project, add this inside the custom-style tag:

  <dom-module id="custom-textfield" theme-for="vaadin-text-field">
    <template>
      <style>
        [part~="label"]
 {
          font-weight: bold;
        }
      </style>
    </template>
  </dom-module>

Everthing inside the part block is regular CSS, it’s just the packaging that’s new :slight_smile:

If you don’t have that particular file, create one under src/main/webapp/frontend/styles, with this content:

<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">

<custom-style>
    
  <dom-module id="custom-textfield" theme-for="vaadin-text-field">
    <template>
      <style>
        [part~="label"]
 {
          color: red;
        }
      </style>
    </template>
  </dom-module>
  
</custom-style>

You’ll also need this annotation on your root (main) layout:

@HtmlImport("frontend://styles/shared-styles.html")