Angular2 Material Dialog css，对话框大小 [英] Angular2 Material Dialog css, dialog size

问题描述

Angular2 材料团队最近发布了 MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我想更改 angular2 材质对话框的外观和感觉.例如，要更改弹出容器的固定大小并使其可滚动，请更改背景颜色等.这样做的最佳方法是什么?有我可以玩的 css 吗?

I'd like to change the looking and feel about the angular2 material's dialog. For example, to change the fixed size of the popup container and make it scrollable, change the background color, so forth. What's the best way to do so? Is there a css that I can play with?

推荐答案

您可以使用开发工具检查对话框元素，并查看在 mdDialog 上应用了哪些类.

You can inspect the dialog element with dev tools and see what classes are applied on mdDialog.

例如.md-dialog-container是MDDialog的主类，padding:24px

For example, .md-dialog-container is the main classe of the MDDialog and has padding: 24px

您可以创建自定义 CSS 来覆盖您想要的任何内容

you can create a custom CSS to overwrite whatever you want

.md-dialog-container {
      background-color: #000;
      width: 250px;
      height: 250px
}

在我看来，这不是一个好的选择，可能与 Material guide 背道而驰，但由于它没有以前版本中的所有功能，您应该做您认为最适合您的事情.

In my opinion this is not a good option and probably goes against Material guide but since it doesn't have all features it has in its previous version, you should do what you think is best for you.

这篇关于Angular2 Material Dialog css，对话框大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！