Why the system css styles override my custom styles?

Flow
1

Hello everyone)
Vaadin 8.3.1
Please tell me, why default styles override my changes
For example: I want to change style for TextField by dynamicly, but default styles(like v-textfield-tiny or v-textfield) override my styles.

textField.addStyleName(ValoTheme.TEXTFIELD_TINY);

.............
public void changeFontSize(){
  textField.addStyleName(FONT.font_size_18px);//I want to change only font size
}

42701.png

2

In CSS more specific rules override generic ones. There is even this long document describing that process: https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

There are several approaches that will work, but the easiest, probably, is to add !important in your style definition. That should do the trick :wink:

3

Thanks!