如何在Angular中修改ngx-timepicker-field输入框字体大小？

我想要修改该时间选择器输入框的字体大小，相关截图如下：

以下是相关代码：

HTML组件代码 #

<div class="time-picker" dir="ltr">
    <ngx-timepicker-field [defaultTime]="'00:00'" [format]="24" [clockTheme]="theme"></ngx-timepicker-field>
</div>

TS组件代码 #

import { NgxMaterialTimepickerTheme } from 'ngx-material-timepicker';

theme: NgxMaterialTimepickerTheme = {
        container: {
          bodyBackgroundColor: '#25bcbd',
          buttonColor: '#fff',
        },
        dial: {
            dialBackgroundColor: '#4fcbcc',
        },
        clockFace: {
          clockFaceBackgroundColor: '#e6e7e8',
          clockHandColor: '#25bcbd',
          clockFaceTimeInactiveColor: '#4f5757',
        },
    };

我搜索后未找到可行的解决方案。

解决方案 #

ngx-material-timepicker的内置主题配置没有提供输入框字体大小的直接设置项，你可以通过CSS样式覆盖来实现：

• 全局样式修改
  在项目的全局样式文件（如styles.scss）中添加：

.ngx-timepicker-field input {
    font-size: 16px; /* 替换为你需要的字体大小值 */
}

• 组件内样式穿透
  如果你的组件启用了视图封装（ViewEncapsulation），需要使用样式穿透来修改组件内部样式，在组件的样式文件中写：

:host ::ng-deep .ngx-timepicker-field input {
    font-size: 16px;
}

如果上述选择器不生效，可通过浏览器开发者工具检查输入框元素，确认其实际的CSS类名或选择器后调整代码。

内容的提问来源于stack exchange，提问作者Rezvaneh Aftabgard