增加 MatBottomSheet 的宽度？答案

【问题标题】：Increasing the Width of the MatBottomSheet?增加 MatBottomSheet 的宽度？
【发布时间】：2019-11-13 20:00:05
【问题描述】：

以下 CSS 增加高度但不增加宽度：

.mat-bottom-sheet-container {
  min-height: 100vh;
  min-width: 100vw;
  margin-top: 80px;
}

有人知道如何增加MatBottomSheet 的宽度吗？ Stackblitz new window demo.

请注意，演示必须在新窗口中运行（在新窗口中打开）才能看到MatBottomSheet 不是完整视图。

【问题讨论】：

【解决方案1】：

这是因为您将 mat-bottom-sheet-container-large 应用于具有 css 的同一元素

.mat-bottom-sheet-container-large {
     min-width: 512px;
     max-width: calc(100vw - 256px); 
}

删除该类或将 !important 属性添加到您的 mat-bottom-sheet-container 类中的 min-width

.mat-bottom-sheet-container {
  min-height: 100vh;
  min-width: 100vw !important;
  margin-top: 80px;
}

【讨论】：

!important 工作得真棒，它是 Angular Material 控制 CSS 的完美解决方案。我在元素的类列表中没有看到.mat-bottom-sheet-container-large。你在mat-bottom-sheet-container 元素上看到了吗？
是的，我在 mat-bottom-sheet-container 元素上看到它可能是它基于屏幕大小 bcs 当我将其缩小时应用 mat-bottom-sheet-container-large 更改为 mat-bottom-sheet-container-medium
啊 - 明白了 - 这是一个响应式实用程序 - 再次感谢！！

【解决方案2】：

您可以为每个底部工作表使用自己的自定义 CSS 类，并将该类通过配置对象中的 panelClass 属性传递给 MatBottomSheet，而不是 CSS 覆盖 .mat-bottom-sheet-container。

this.myBottomSheet.open(MyComponent, {
  panelClass: 'my-component-bottom-sheet'
});

在您的全局 styles 中定义您的自定义类：

.my-component-bottom-sheet {
  min-height: 100vh;
  min-width: 100vw !important;
  margin-top: 80px;
}

因此您可以为每个底部工作表定义单独的类。

【讨论】：