Styling the Button Label in Vaadin

Flow
1

Hi Guys,

until now i still used vaadin 6/7/8 for my projects for years and all worked fine for me.

Because of some reasons i needed to use new vaadin flow with web components and run in the first issues.

I have a Button and i need to style the label inside the component.
I have add a Stylename to my Button:

unit = new Button("Unit of Measure");
unit.addClassName("buttonSetup");

Then I tried something like this in my css file:

.buttonSetup div[part="label"]
 { 

	/*my styles */
}

Because of shadow dom the normal way don`t work.

Then i have investigate how to solve this issue and found this page:

https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes

I tried what is explained on this site and in my case:

.buttonSetup #shadow-root
  <style>
    [part="label"]
 {
      /* my styles here */
    }
  </style>

But this isn´t function as well.
I didn´t know how to solve this issue.

Please help me and sorry for bad english.

Best Regards

2

The recommended way to style your Vaadin 10 - 13 app is to use shared-styles.html file in your front end folder and style modules there. There some examples about button label styling

https://vaadin.com/forum/thread/17554688/change-button-text-align

https://vaadin.com/forum/thread/17592625/multiline-button

There is complete demo app of various styling aspects here

https://github.com/TatuLund/devday-demo-flow

3

Ok, i understand.

Now it´s clear and easy.

Sorry for your effort and thank you very much.

Guess it would be a good idea to dive into the new concepts before beginning with development. ^^