Question

有没有办法使用ng-class在md-input-container中设置md-input标签的样式？

我可以使用内联css设置样式，但是当css类应用于标签时，它不起作用吗？

这是预期的行为（有任何解决方法吗？）还是我错过了什么？

CSS：

.red {
  color: red;
}

HTML：

<md-input-container class="md-block" flex-gt-xs="">
            <label class="red">Company (Disabled)</label>
            <input ng-model="user.company" disabled="">
          </md-input-container>

标签不会像使用此代码那样改变颜色：

      <md-input-container class="md-block" flex-gt-xs="">
        <label style="color:red">Company (Disabled)</label>
        <input ng-model="user.company" disabled="">
      </md-input-container>

请建议！

Answer 1

试试这个：

md-input-container label.red{
  color: red
}

或者：

.red {
  color: red !important;
}

Answer 2

根据你应该使用的标准，主题概念，如果你使用材料角js。这是整个想法。

默认情况下，您的Angular Material应用程序将使用默认主题，即为意图组预先配置以下调色板的主题：

小学 - 靛蓝口音 - 粉红色警告 - 红色背景 - 灰色（注意白色在此调色板中）在应用程序配置期间使用$ mdThemingProvider完成默认主题的配置。

您可以通过调用适当的配置方法（theme.primaryPalette，theme.accentPalette，theme.warnPalette，theme.backgroundPalette）为指定的颜色意图指定调色板。

来自官方网站的材料角度：

＆＃13;

    angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {

  $mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });
});

＆＃13;

相信我，你的代码会得到更好的润滑。请按照：

Answer 3

<强> CSS

md-input-container label { color : red;}

（或）

md-input-container { color : red;}

Answer 4

您可以使用ng-class - CodePen

标记

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <md-input-container class="md-block" flex-gt-xs="">
    <label ng-class="{red: vm.label}">Company (Disabled)</label>
    <input ng-model="user.company" disabled="">
  </md-input-container>
</div>

CSS

.red {
  color: red;
}

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.label = true;
});

使用css类在md-input-container中设置标签

4 个答案: