如何自定义Angular Material Design Mat-DatePicker图标大小

Question

我希望将日期选择器材料的图标调整适合我的div中，没有任何边距或填充。 我的代码如下：

<div class="container">

    <input [matDatepicker]="datePicker1" type="hidden" class="dp">
    <mat-datepicker #picker class="dp"></mat-datepicker>
    <mat-datepicker-toggle  class="dp" [for]="datePicker1"></mat-datepicker-toggle>

</div>

SCSS

.container{
    border-width: 1px;
    border-style: solid;
    border-color: silver;
}
::ng-deep .dp {
    padding: 0;
    margin: 0;
    font-size: 10px;

    border-width: 1px;
    border-style: solid;
    border-color: red;

    height: 12px;
    width: 12x;
    line-height: 12px;
    min-height: 12px;
}

我希望看到图标周围的红色边框与底部和顶部的灰色边框（或全部）相接触。请指导如何访问正确的属性以实现此目的。

- Felix

---

你能为这个创建一个 StackBlitz 吗？ - Sangwin Gawande

Answer 1

这满足你的需求吗？

将 display: flex 添加到你的容器类中，它会默认拉伸内容部分。

https://stackblitz.com/edit/angular-material-datepicker-tvxvqt?file=src%2Fapp%2Fdatepicker-formats-example%2Fdatepicker-formats-example.component.css

- huan feng

Answer 2

终于我找到了两个解决方案：

创建一个CSS类（名称很重要，以覆盖默认的CSS）：

.mat-mdc-icon-button {
   transform: scale(0.7);
}

直接在组件上使用它：

<mat-datetimepicker-toggle class="mat-mdc-icon-button"></mat-datetimepicker-toggle>

或者直接在项目的styles.scss文件中创建CSS类，以应用于所有组件。

- Greg