Angular Dart Material Daterange 选择器高度答案

【问题标题】：Angular Dart Material Daterange picker heightAngular Dart Material Daterange 选择器高度
【发布时间】：2019-03-26 08:17:19
【问题描述】：

我使用 <material-date-range-picker ...> 但它显示为高。我发现material_date_range_picker.scss 声明了.main-content { ...; height: $datepicker-main-content-height; ... } 并且$datepicker-main-content-height 被定义为$mat-grid * 9，即72px。该组件看起来很难看并且破坏了布局。其他日期选择器组件没有定义高度并且看起来很正常。我试图通过:host .main-content { height: auto !important} 覆盖我的 CSS 中的高度，但是由于 Angular 向元素添加了一些 _ngcontent-rnp-XX 类，所以它不适用。有人知道如何设置 material-date-range-picker 高度的样式吗？（以及为什么将其样式设置为具有固定高度）。

【问题讨论】：

标签： dart angular-material2 angular-dart

【解决方案1】：

因此，您可能想在此处尝试使用此 mixin，它可能更适合您的环境。 https://github.com/dart-lang/angular_components/blob/c644746d2824df7cfaf0a34f900b1f8557caddbc/angular_components/lib/material_datepicker/_mixins.scss#L221

您还可以使用 :ng-deep 查看它是如何设置 .main-content 高度的。对于 Google 产品，我们不希望人们使用 ng-deep 进行自定义，因为它使所有内容都成为公共 API 的一部分，这使得迁移变得困难，但在此内容中应该没问题。

我们将考虑为团队提供一个 mixin，以便以更易于维护的方式自行设置高度。

很高兴您喜欢使用这些小部件，但请您注意批评。这种特殊的设计非常适合我们的产品，我们的许多设计师都喜欢它并认为它看起来很漂亮。我知道它不适用于您的用例，但希望上述自定义对您有用。

【讨论】：

谢谢特德。用mixin看起来不错，我试试。很抱歉造成误解，通过说该组件看起来很丑，我只是想指出它看起来不同，并且使用与其他日期选择器组件不同的定义。这使得它们很难一起使用。但绝对 Angular Dart 和材料组件作为一个整体很棒，这就是我使用它的原因。