how to change thaw component text size? about thaw HOT 10 CLOSED

If you want to change the popup style of all date picker components, you can add a class to override it.

If you want to change only the popup style of the specified date picker component, I can add a popup_class attribute to the date picker component.

from thaw.

the quick solution is to" change the popup style of all date picker components", could you give me a class override example? I can try it.
thanks in advance.

from thaw.

Add the following classes.

.thaw-date-picker-panel {
    font-size: 12px;
}

from thaw.

it really can work, but the panel position is strange just live above picture.

and date panel can work too, the panel can appear but disappear quickly and date can not be selected?

I use leptos_meta style grammer as following, don't know it's correct or not.

from thaw.

Try it like this.

<Style>
".font-normal { font-weight: 400; font-size: 0.75rem; }"
".thaw-time-picker-panel, .thaw-date-picker-panel { font-size: 0.75rem; }"
</Style>
"date"
<DatePicker class="font-normal" value=date_value/>
"time"
<TimePicker class="font-normal" value=time_value />

from thaw.

Try it like this.

<Style>
".font-normal { font-weight: 400; font-size: 0.75rem; }"
".thaw-time-picker-panel, .thaw-date-picker-panel { font-size: 0.75rem; }"
</Style>
"date"
<DatePicker class="font-normal" value=date_value/>
"time"
<TimePicker class="font-normal" value=time_value />

thanks，it really work, I don't know why it's class="font-normal", but it really work,

sorry again,
I add button color class as follwing picture, but why the button color keep as default(not changed)?

and using .thaw-alert__content, .thaw-alert__header to change alert component font size seem not work( only header font size can change?)

from thaw.

There should be style overwriting due to css priority issues.

from thaw.

There should be style overwriting due to css priority issues.

is there temporary solution or it's application leptos issue?

from thaw.

I add button color class as follwing picture, but why the button color keep as default(not changed)?

Try this.

<Style>
".my-button.thaw-button { background-color: #04AA6D; }"
</Style>
<Button class="my-button">"next"</Button>

and using .thaw-alert__content, .thaw-alert__header to change alert component font size seem not work( only header font size can change?)

I guess it is a css priority issue, which can be solved by adding !important.

from thaw.

splendid! your important solution can work
thanks!

from thaw.