md-dialog-container的覆盖角材料大小和样式 [英] Overriding Angular Material Size and Styling of md-dialog-container
问题描述
我正在使用Angular Material,并且我正在使用md-dialog作为我的画廊的弹出窗口.默认的动画和样式看起来不错.但是,我想更改md-dialog-container
大小的宽度和高度吗?这是隐藏的.仅在单击模式时和打开chrome dev工具时添加,您可以看到md-dialog-container
出现.一定要包括如何覆盖其余样式.
I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container
? which is hidden. Only added when I click the modal and when you open the chrome dev tools you can see the md-dialog-container
appearing. Do include how to override the rest of the styling.
非常感谢您的帮助.谢谢.
Much appreciate with some help. Thanks.
推荐答案
摘自官方文档:
样式叠加层组件
基于叠加层的组件具有panelClass 可用于定位覆盖面板的属性(或类似属性).
Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.
您可以通过在全局 styles.css
中添加css类来覆盖默认的对话框容器样式.例如:
You can override the default dialog container styles by adding a css class in your global styles.css
. For example:
.custom-dialog-container .mat-dialog-container {
/* add your styles */
}
之后,您需要为对话框提供一个 panelClass
参数作为CSS类:
After that, you'll need to providies you css class as a panelClass
parameter to your dialog:
this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })
阅读此 官方文档 > 了解更多信息.
Read this official documentation for more information.
这篇关于md-dialog-container的覆盖角材料大小和样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!