css - 更改 primeng 日历中时间选择器的样式

Question

我正在尝试删除填充并将字体样式设置为更小的时间选择器，该时间选择器用于 Angular 7 的 primeng 日历。

<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;
}

实际有效，字体变小了，但是 padding 还是一样的，因为 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