不能在材料设计中应用CSS自定义类

Question

    <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类应用于我的角材料，但是它不起作用，但是如果我使用内联样式，那么我可以。

Answer 1

这有效！因此，某些样式被Angular-Material类所覆盖，最简单的解决方案是将!important添加到被覆盖的CSS属性中！

如何检查什么是被覆盖的内容？

打开控制台，选择要检查的元素，单击元素，然后检查您添加的CSS类，如果该特定类的任何属性上都有strikethrough，则您在该特定的特定上添加!important属性！

注意：由于未提供样式表，因此我默认使用了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;
  }