我使用 <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 高度的样式吗？ （以及为什么样式要具有固定的高度）。
答案 0 :(得分：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的一部分，这使得迁移变得困难，但是在此内容中应该可以。
我们将研究为团队提供一种混合方式，以更易于维护的方式自行设置高度。
很高兴您喜欢使用这些小部件，但请您注意批评。这种特殊的设计非常适合我们的产品，我们的许多设计师都喜欢它，并认为它看起来很漂亮。我了解它不适用于您的用例，但希望上面概述的自定义将对您有用。