There are few styles I would like to override in the lumo theme for the vaadin-date-picker, but I don’t see my changes. I can change them directly in the node_modules/vaadin-date-picker/theme/lumo files, and they work, but that’s obviously not going to cut it. Any idea what I’m doing wrong? Here is my code:
import { html, css, LitElement } from 'lit-element'
import '@vaadin/vaadin-date-picker/vaadin-date-picker'
import moment from 'moment';
export class TwaDateSearch extends LitElement {
static get properties() {
return {
date: String,
}
}
constructor() {
super();
this.date = ''
}
render(){
return html`
<dom-module theme-for="vaadin-text-field">
<template>
<style>
[part~="input-field"]
{
height: 30px;
width: 130px;
font-size: 13px;
border-radius: 0;
}
</style>
</template>
</dom-module>
<dom-module theme-for="vaadin-month-calendar">
<template>
<style include="vaadin-month-calendar-default-theme">
[part="date"]
{
font-size: 13px;
}
[part="weekday"]
{
font-size: 11px;
}
[part="month-header"]
{
font-size: 14px;
}
</style>
</template>
</dom-module>
<dom-module theme-for="vaadin-button">
<template>
<style>
:host {
color: #2d699e !important;
}
</style>
</template>
</dom-module>
<vaadin-date-picker
@change="${this.datePicked}"
placeholder="ddMMMyy" .value="${this.date}">
</vaadin-date-picker>
`;
}
datePicked(){
this.date = moment(this.querySelector('vaadin-date-picker').value)
this.dispatchEvent(new CustomEvent('datepicked', {}));
}
createRenderRoot(){
return this
}
}
This whole element is in the shadowRoot of another element, but the styles are contained in this file, so I wouldn’t think that would make a difference.
Any help is very much appreciated! And please let me know if I should provide any additional information.