Joey12
(Joey Chen)
December 1, 2018, 12:55pm
1
Hi,
I have shared-style.html like:
<dom-module id="maintfield" theme-for="vaadin-text-field">
<template>
<style>
:host([required]
) [part="input-field"]
{
border: 1px solid;
background-color: #F2E8B6
}
</style>
</template>
</dom-module>
However, the background-color of the created TextField behaved wield. When focused, the color was OK. When losing focus, it became default color. The color just jumped back and forth. However, the same code behaved normally in Vaadin 11. I don’t know why?
Best regards,
Joey
web-padawan
(Serhii Kulykov)
December 3, 2018, 9:33am
2
Hello, this is actually caused by how theme modules are loaded.
I have reported the issue here: https://github.com/vaadin/vaadin-themable-mixin/issues/38
Until we get it fixed, please use the workaround like this to increase CSS specificity:
<dom-module id="maintfield" theme-for="vaadin-text-field">
<template>
<style>
:host([required]
) [part="input-field"]
,
:host([required]
[invalid]
) [part="input-field"]
{
border: 1px solid;
background-color: #F2E8B6
}
</style>
</template>
</dom-module>
You can also use !important
if you are absolutely sure that it doesn’t expected to be overridden.
Joey12
(Joey Chen)
December 3, 2018, 11:42am
3
Thanks a lot. Similar issue also happens to vaadin-button. My custom style looks like:
<dom-module id="toolbar" theme-for="vaadin-button">
<template>
<style>
:host {
background-color: #D6E4F1;
cursor: pointer;
}
:host([hidden]
) {
display: none !important;
}
</style>
</template>
</dom-module>
However, the background-color and cursor don’t behave as expected, while Vaadin 11 works. Any alternatives?
Best regards,
Joey
web-padawan
(Serhii Kulykov)
December 4, 2018, 7:16am
4
In general, when building custom theme on top of Lumo or Material, we recommend using theme attribute like this:
<dom-module id="toolbar" theme-for="vaadin-button">
<template>
<style>
:host([theme="toolbar"]
) {
background-color: #D6E4F1;
cursor: pointer;
}
</style>
</template>
</dom-module>
Then, you can use your custom theme explicitly:
<vaadin-button theme="toolbar">Toolbar button</vaadin-button>
This enables you to keep the Lumo (Material) default appearance untouched, in case you ever need it later.
Joey12
(Joey Chen)
December 4, 2018, 7:27am
5
Thanks a lot. Would that be also applied to other vaadin components such as vaadin-text-field, vaadin-password-field, vaadin-combo-box, etc.?
web-padawan
(Serhii Kulykov)
December 4, 2018, 7:36am
6
Yes, in general it would be better to create custom themes using theme
attribute for all Vaadin components, both to ensure CSS specificity and to make development easier.