Angular Material 布局与我原来的 CSS 冲突答案

【问题标题】：Angular Material layout conflicts with my original CSSAngular Material 布局与我原来的 CSS 冲突
【发布时间】：2017-03-26 08:04:06
【问题描述】：

我刚开始学习 Angular Material。问题是，在我包含 Angular Material 脚本后，我的原始 CSS 变得一团糟。 margin-top 根本不起作用，无论我设置什么值。

谁能帮帮我？

我的登录表单 CSS 是这样的：

#login {
width: 300px;
height: 240px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background: #EEEEEF;
padding: 30px 30px 0px 30px;
}

margin-top 与 Angular 材质冲突。我该如何解决？

【问题讨论】：

你能不能放个网址或者试试代码sn-p让我测试一下？
我能想到的唯一原因是来自 angular-material 的 CSS 比您的 CSS 具有更高的specificity。
您是否尝试过将 `margin-top: 100px !important;` 用于您的风格。
@DanielAbraham 不要教坏做法:)
使用 !important 几乎不是一个好主意。这是 Angular Material 的创建者的糟糕工程。它强制用户添加自己的 !important 修饰符来覆盖它，并且它限制了通过 JavaScript 覆盖它的选项。但是，如果您有时必须这样做，知道如何覆盖它是很有用的。 @tanmay

【解决方案1】：

尽量保持重要的margin-top:100px !important; 如果没有解决，请尝试保留您的代码，以便我们为您提供帮助

【讨论】：

【解决方案2】：

给它一个位置：绝对？

或者我完全错过了重点..输入以通过最低限度

【讨论】：