Angular2材质对话框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的主要类，其填充为: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
}

我认为这不是一个好选择，并且可能与《材料指南》相抵触，但是由于它没有以前版本中的所有功能，因此您应该做自己认为最适合自己的事情.

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 it's previous version, you should do what you think is best for you.

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