更改启动日历中时间选择器的样式

Question

我正在尝试删除填充并将字体样式设置为在较小的角度7的启动日历中使用的时间选择器中。

<p-calendar [ngModel]="xxx" timeOnly="true" [(hourFormat)]="hourFormat" [(dateFormat)]="timeFormat" [showIcon]="false"
  [style]="{'display':'initial'}" [inputStyle]="{'border-width':'1px 1px 1px 1px', 'width':'100%','height':'25px'}"></p-calendar>

但不适用。

这是该框的html类

class="ui-timepicker ui-widget-header ui-corner-all ng-tns-c9-1 ng-star-inserted"

我尝试过

::ng-deep .ui-timepicker .ui-widget-header{
padding:initial;
font-size:smaller;
}

和

::ng-deep .ui-timepicker.ui-widget-header{
padding:initial;
font-size:smaller;
}

不起作用。任何线索都将有所帮助。谢谢。

Answer 1

::ng-deep .ui-timepicker.ui-widget-header{
  padding:initial;
  font-size:smaller;
}

实际上可行，字体较小，但是填充仍然相同，因为primeng具有：

body .ui-datepicker .ui-timepicker {
    border: 0 none;
    border-top: 1px solid #d8dae2;
    padding: 0.857em;
}

具有比您的样式更高的特异性。

您可以增加样式的特殊性：

::ng-deep div.ui-datepicker .ui-timepicker{
  padding:initial;
  font-size:smaller;
}

Stackblitz demo