Angular 材质默认 CSS 更改 ( md-select )答案

【问题标题】：Angular Material Default CSS Change ( md-select )Angular 材质默认 CSS 更改 ( md-select )
【发布时间】：2017-02-23 22:33:22
【问题描述】：

我有兴趣在下拉框中将默认材质蓝色更改为“绿色”。我找不到负责此转换的 div 类，非常感谢任何帮助。

DEMO来自材料网

在触摸时更改下划线的边框底部颜色。
触摸保存的选项时更改边框底部颜色。
在下拉列表中填充保存的数据时更改颜色。

我能够更改表单标签的 CSS 元素，但 md-select 是一场噩梦。下面的剪辑会将所有元素颜色更改为定义的一种，而没有默认颜色过渡（黑色到蓝色）。

.md-text.ng-binding{
    color: orangered;
}

【问题讨论】：

标签： css material-design angular-material md-select

【解决方案1】：

似乎它正在使用 Primary Palette 作为它的颜色。因此，您可以为md-select 制作自定义主题并使用它。

<md-input-container>
 <label>Number</label>
 <md-select ng-model="number" placerholder="Number">
  <md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
    {{num}}
  </md-option>
 </md-select>
</md-input-container>

<md-input-container md-theme="altTheme1">
 <label>Number</label>
 <md-select ng-model="number" placerholder="Number">
  <md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
    {{num}}
  </md-option>
 </md-select>
</md-input-container>

<md-input-container md-theme="altTheme2">
 <label>Number</label>
 <md-select ng-model="number" placerholder="Number">
  <md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
    {{num}}
  </md-option>
 </md-select>
</md-input-container>

角度代码：

angular.module('myApp',['ngMaterial'])
.config(function($mdThemingProvider) {
 $mdThemingProvider.theme('altTheme1')
 .primaryPalette('purple') 
 $mdThemingProvider.theme('altTheme2')
 .primaryPalette('pink') 
 });

这是工作的codepen。

【讨论】：

【解决方案2】：

或者我们可以覆盖下面提到的默认 css。

/* css style to change the bottom line color in dropdown options */
md-select:not([disabled]):focus .md-select-value{
    border-bottom-color: #008cba;
}

/* css style to change mini warning message upon touch */
md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value.md-select-placeholder {
    color: #008cba; 
}

【讨论】：

【解决方案3】：

Angular 材质输入、选择、单选按钮等适用于所选的主要主题。默认为蓝色，因此您可以看到。您可以定义您的自定义主主题颜色，所有输入都应该开始使用它。

把下面的 index.js 主要配置函数。确保在配置函数中注入 $mdThemingProvider。

$mdThemingProvider.theme('default').primaryPalette('cyan', { 'default': '700' });
$mdThemingProvider.theme('default').accentPalette('blue-grey', { 'default': '500' });

【讨论】：

这将改变 UI 中所有元素的它们，而不仅仅是选择