You have a space between .linkBlack and .v-button-link; these are applied on the same DIV, so remove the space for proper matching. You can also use .v-button-linkBlack as a selector.
The .linkBlack.v-button-link approach worked but .v-button-link-linkBlack did not.
For .linkBlack.v-button-link approach to work, I did have to add !important to my style elements.
.linkBlack.v-button-link {
color: black !important;
}
Is there any drawback (performance issue, browser compatibility issue etc) with using important?
In my old chameleon theme, .v-button-link-linkBlack used to work just fine (without using the important tag). Not sure why the same approach does not work in Valo.
vaadin generates the following: v-button, v-button-[addedstylename]
, [addedstylename]
. In your case you’ve added both ‘link’ and ‘linkBlack’. Note that vaadin doesn’t combine the added style names to a single name, thats why v-button-link-linkblack won’t work, but v-button-link.linkBlack does.
the only issue is when someone else once again tries to override the styles; it might become very difficult to override the override.
usually these things boil down to more specific CSS classes defined in other styles: try to add more selectors to your rule, e.g. v-ui, the theme name, layout names, etc. You can easily check what style is overriding yours using eg Firebug for Firefox, or the Chrome Inspector.