无法在材料设计中应用 CSS 自定义类答案

【问题标题】：Cannot apply CSS custom class in material design无法在材料设计中应用 CSS 自定义类
【发布时间】：2018-02-16 06:27:18
【问题描述】：

    <div class="col-md-offset-4 col-md-6">
        <div style="margin-top: 50%">
            <md-input-container class="col-md-10"> 
            <label>
                Username
            </label> 
            <input type="text" ng-model="user.userName"> 
            </md-input-container>
        </div>
        <br>

        <div>
            <md-input-container class="col-md-10"> 
                <label>
                    Password
                </label> 
                <input ng-model="user.userPassword">
            </md-input-container>
        </div>
        <br>
        <div class="col-md-10">
            <a style="color: #2e98d6; border: 1px solid #2e98d6; text-transform: none; cursor: pointer;
           min-height: 36px; min-width: 150px; font-weight: 500; font-size: 14px; border-radius: 37px;
        padding: 0 20px;" class="md-button md-primary primary-btn pull-right" ng-click="doLogin()">Login</a>
        </div>
    </div>

我正在尝试将自定义 css 类应用于我的角度材料，但它不起作用，但如果我使用内联样式，那么我可以。

【问题讨论】：

显示您的自定义 CSS 类。向我们展示有效的方法并不能真正帮助我们解决您的问题。此外，请务必向我们展示您加载材料 css 的位置以及加载自定义 css 的位置。
这听起来像是一个特异性问题，这就是内联有效的原因。

标签： css angularjs angularjs-material

【解决方案1】：

这行得通！因此，一些样式被 angular-material 类覆盖，最简单的解决方法是将 !important 添加到被覆盖的 CSS 属性中！

如何检查被覆盖的内容？

打开控制台，选择您要检查的元素，单击该元素并检查您添加的 CSS 类，如果该特定类的任何属性上有 strikethrough，则添加 @987654324 @ 在那个特定的属性上！

注意：由于没有提供样式表，我默认使用angular-material 添加的类。另外请忽略小提琴中的Javascript部分。

JSFiddle Demo

CSS：

.button-customize{
  color: #2e98d6 !important; 
  border: 1px solid #2e98d6;
  text-transform: none; 
  cursor: pointer;
  min-height: 36px; 
  min-width: 150px; 
  font-weight: 500; 
  font-size: 14px; 
  border-radius: 37px !important;
  padding: 0 20px;
  }

【讨论】：

在important! 上使用特异性。这包括级联。