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

Question

我正在尝试删除填充并将字体样式设置为在primeng日历中用于角度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 演示