如何调整Blazor中Radzen DatePicker组件的字体大小？

方法一：自定义CSS类精准定位内部元素（推荐） #

Radzen组件会生成嵌套DOM结构，内部输入文本元素有独立的样式类，需要精准选择才能覆盖默认样式：

1. 给RadzenDatePicker添加自定义Class属性：

<div class="rz-p-0 rz-text-align-center">
    <RadzenDatePicker @bind-Value=@value 
                      ShowTime="false" 
                      HourFormat="12" 
                      Class="custom-datepicker" 
                      Style="height:1.5vh;width:30%;" 
                      DateFormat="MM/dd/yyyy" />
</div>

@code {
    DateTime? value = DateTime.Now;
}

2. 根据样式作用范围添加CSS规则：

• 全局样式（如wwwroot/css/app.css）：

.custom-datepicker .rz-inputtext {
    font-size: 14px; /* 替换为你需要的字体大小 */
}

• 组件隔离样式（如YourComponent.razor.css，需用::deep穿透隔离）：

::deep .custom-datepicker .rz-inputtext {
    font-size: 14px;
}

方法二：使用!important强制覆盖（应急方案） #

若需快速生效，可直接在组件Style属性中添加带!important的规则：

<RadzenDatePicker @bind-Value=@value 
                  ShowTime="false" 
                  HourFormat="12" 
                  Style="height:1.5vh;width:30%;font-size:14px !important;" 
                  DateFormat="MM/dd/yyyy" />

注意：!important会强制覆盖所有冲突样式，非必要不建议使用，避免增加后续样式维护成本。

方法三：全局修改Radzen组件字体大小（统一调整场景） #

如果需要让所有Radzen输入组件字体大小保持一致，可通过修改SCSS变量实现：

1. 创建自定义SCSS文件（如wwwroot/css/custom-radzen.scss）：

@import "~@radzen/blazor/css/base.css";

// 覆盖输入框字体大小变量
$rz-input-font-size: 14px;

@import "~@radzen/blazor/css/default.css";

2. 将SCSS编译为CSS后在项目中引用（可通过构建工具或脚本完成编译）。

原方法无效的原因 #

RadzenDatePicker渲染后，内部输入文本元素带有rz-inputtext类，其字体大小由Radzen默认CSS控制。父div的font-size会被组件内部样式覆盖，组件的Style属性仅作用于外层容器，无法直接影响内部输入元素，因此需要精准选择内部元素设置样式。

内容的提问来源于stack exchange，提问作者Greg W