我想要更改此输入的大小

enter image description here

此处为.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',
        },
    };

我找了,但没有找到解决方案!

推荐答案

文档中没有配置,而是使用如下所示的自定义css解决方案.

.custom-timepicker-css {
  .timepicker-dial__container {
    margin-top: 20px;
  }
  .timepicker-dial__control {
    font-size: 20px !important;
    width: 30px !important;
  }
  .timepicker-dial__time {
    font-size: 20px !important;
  }
}

HTML

<ngx-mat-timepicker
  timepickerClass="custom-timepicker-css"
  #timepicker
  [enableKeyboardInput]="true"
  [max]="maxTime"
  [min]="minTime"
></ngx-mat-timepicker>

stackblitz

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

单表单和多个提交(具有多个值)

为什么这个高度为100%的页面会出现滚动条?

HTML表行悬停仅适用于偶数行

如何阻止Chromecast图标出现在HTML5视频

Angular 15 p-对话框不使用组件 Select 器呈现HTML

如何在所有屏幕大小下使带有背景图像的伪元素作为标题的衬底?

如何更改计时器S输入的Angular 字体大小?

使用单个粗体字符串向段落添加页边空白

如何使活动选项卡背景作为父背景图像

下划线在 Bootstrap 5 导航链接下无法正常工作

为 HTML5 文本字段设置最后六位正则表达式模式

在DIV上应用梯度模糊未如预期工作

如何将两个平行 div 的页面内的表格居中?

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ?

a with