SCSS not working for Label Field

Hi,

Following is my source code

[i]
@Theme(“sassy”)
public class SassyUI extends UI
{
@Override
public void init(VaadinRequest request)
{
Layout layout = new VerticalLayout();

    Button b = new Button("Reindeer");
    layout.addComponent(b);
    setContent(layout);
    
    Button b1 = new Button("important");
    b1.addStyleName("important");
    layout.addComponent(b1);
    
    Button b2 = new Button("More important");
    b2.setPrimaryStyleName("my-button");
    layout.addComponent(b2);
    
    Label label = new Label("Sample Text Field");
    label .addStyleName("textdata");
    layout.addComponent(label);
}

}
[/i]

And my sccs file is sassy.scss
[i]
@import “…/reindeer/reindeer.scss”;

@mixin sassy {

@include reindeer;

   // your styles go here
.v-button-caption {
    color:  red;
   }
   
   .v-label-caption {
    color: red;
}

.important .v-button-caption {
    color: green;
}

.textdata .v-label-caption {
    color: red;
}

@include base-button($name: my-button);
.my-button {
    color: blue;
   }

}
[/i]

Styles are applied only to the buttons. I’m seeing the label as normal and no intended style is applied to the label. And even for TextField the styles are not getting applied. Not sure whether am I missing something.

Regards,
Arun V

You’ll want to use your browser’s debug tools to check which rules are actually active. I suspect there are rules with more specific selectors in Reindeer that end up overriding your ones.