vaadin 8 styles.scss not working with setStyleName

Question

I am working on styles.scss. This is working :

.v-Notification-notif {
        background: #FFFFFF;
        border: 10px solid rgb(245, 121, 0);
}

but this is not :

.v-Notification-notif.warning .v-Notification-caption {
        color: rgb(0, 0, 0);
        font-size: 30px;
}

when I say

        notif.setStyleName("notif");

notif is a Notification. Thank you for help.

I also tried :

.notif {
    
    .v-Notification {
        background: #FFFFFF;
        border: 10px solid rgb(245, 121, 0);
    }
    
    .v-Notification.warning .v-Notification-caption {
        color: rgb(0, 0, 0);
        font-size: 30px;
    }
}

but it still does not work.

Answer 1

The Notification class is internally using the style name mechanism for the different notification types. Type.WARNING is thus only a shorthand for doing setStyleName("warning") and setDelayMsec(1500). If you do setStyleName("notif") for a warning notification, then you will override the initially set warning style name. If you want to use custom styles for some warning notifications, then you can use a distinct style name for them, e.g. notif-warning.