How to style calendar's text input?

[ScumSprocket]

Using the Prime v2 component library in Vue, the input field isn't responding to font size styling, unless called by an id. This isn't a satisfactory method.

I can see in the rendered html:

Code: Select all

<span...>            
  <input class="p-inputtext p-component p-filled"...

In the source code, I see that element and classes are generated by the calendar component's

Code: Select all

<span :class="containerClass">
    <CalendarInputText ref="input"...

    containerClass() {
        return [
            'p-calendar p-component p-inputwrapper',
            {
                'p-calendar-w-btn': this.showIcon,
                'p-calendar-timeonly': this.timeOnly,
                'p-inputwrapper-filled': this.value,
                'p-inputwrapper-focus': this.focused
            }
        ];

No amount of !important or redundantly adding classes to my postccs helps... not even * on the component's parent page. Font size and that input's background color are the only thing that won't change... I don't need the bg to alter, but it's weird that stuff like color are responding, but the text size.... which appears to be extremely small, and not like any other text in my app... will not change!

Arrgh Thanks

[tugce.kucukoglu]

Hi,

Sorry for delayed answer. There is an easy way for PrimeVue 3 and it is ported for the next version.
https://github.com/primefaces/primevue/issues/1824

Regards,