how to change thaw component text size?

[skydig]

like above picture,
how can I change calendar font size just like 2024-01-17(smaller) which I have modified using class?
thanks.

[luoxiaozero]

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.

[skydig]

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.

[luoxiaozero]

Add the following classes.

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

[skydig]

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.

[luoxiaozero]

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 />

[skydig]

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?)

[luoxiaozero]

There should be style overwriting due to css priority issues.

[skydig]

There should be style overwriting due to css priority issues.

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

[luoxiaozero]

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.

[skydig]

splendid! your important solution can work
thanks!