Is it possible to change the style of CustomComponent caption in Vaadin 8

Question

I am using a CustomComponent inside a VerticalLayout in Vaadin. I want to change the style of caption to bold But it is not working.

My calss as below:

public class MyTab extends CustomComponent implements UpdatableComponent {

    public MyTab() {

        HorizontalSplitPanel panel = new HorizontalSplitPanel();
        panel.setSplitPosition(218, Unit.PIXELS);
        panel.setFirstComponent(createFirstPanelComponent());
        panel.setSecondComponent(createSecondPanelComponent());
        panel.setLocked(true);
        panel.addStyleName("has_border");
        setCaption("This is my title");
        addStyleName("padding-bottom-10px");
        addStyleName("bold-caption");
        }
        setSizeFull();
        setCompositionRoot(panel);
    }

}

I have tried these definitions for "bold-caption" inside my scss file . None of them has worked:

• .bold-caption { font-weight: bolder !important; }
• .bold-caption.v-caption{ font-weight: bolder !important; }
• .bold-caption.v-caption.v-captiontext{ font-weight: bolder !important; }
• .bold-caption { .v-caption{ font-weight: bolder !important; } }

The main question is also how to style caption of custom component in Vaadin inside different layout? Any solution?

Answer 1

I figured this out. I used:

.v-caption.bold-caption {
    font-weight: bolder !important;
  }

Don't forget to remvoe cache and build the application if you are using Vaadin add-ones.