Javascript 是否可以更改角度材质的假状态颜色';MDS交换机?

Javascript 是否可以更改角度材质的假状态颜色';MDS交换机?,javascript,angularjs,material-design,angular-material,Javascript,Angularjs,Material Design,Angular Material,棱角材料是一个可怕的指令。由于我在文档中或在web上找不到相关内容,我想知道当指令处于错误状态时,是否有可能更改指令的背景 正如您在上面的链接中看到的,当md开关处于真实/活动状态时,它可以具有颜色。您可以使用class或ng class语句简单地设置它 我想虽然有两种颜色,让我们说md主要当我的范围是真的和md警告当它的fasle 例如: <md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': s

棱角材料是一个可怕的指令。由于我在文档中或在web上找不到相关内容,我想知道当指令处于错误状态时,是否有可能更改指令的背景

正如您在上面的链接中看到的,当md开关处于真实/活动状态时,它可以具有颜色。您可以使用class或ng class语句简单地设置它

我想虽然有两种颜色,让我们说md主要当我的范围是真的和md警告当它的fasle

例如:

<md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': status === true, 'md-warn': status === false}"></md-switch>

但这是行不通的

有没有办法不用手动覆盖CSS就能做到这一点


ps:状态正在更改,没有问题;)

其实很简单:

/* 
 * The bar:
 */

md-switch .md-bar {
    background-color: #333; /* set not selected bar color */
}

md-switch.md-checked .md-bar {
    background-color: pink; /* set selected bar color */
}

md-switch[disabled] .md-bar {
    background-color: rgba(51, 51, 51, .15); /* set disabled bar color */
}

/* 
 * The switch:
 */

md-switch .md-thumb {
    color: rgb(158,158,158); /* not selected switch color */
}

md-switch.md-checked .md-thumb {
    background-color: rgb(255,255,255); /* selected switch color */
}

md-switch[disabled] .md-thumb {
    background-color: rgb(255,255,255); /* disabled switch color */
}

/* 
 * Ripple effect
 */

md-switch .md-ink-ripple { 
   color: rgb(255,0,0); /* not selected switch ripple color */
} 
md-switch.md-checked .md-ink-ripple { 
   color: rgb(92,184,92); /* selected switch ripple color */ 
}

使用最弱的CSS选择器更新了对角度材质的样式
md开关状态的响应(在最新版本上检查:
1.0.0-rc7

如果希望这与主题相关,则需要在上述每个元素上添加主题CSS选择器(如果以“角度”方式设置主题,则类将自身应用于每个角度材质元素):


您必须根据状态覆盖类的css。这必须是有条件的。否则
背景色:#333将在那里,而不考虑状态..是的,这很简单。我想知道我是否可以在不操纵css的情况下完成它,但我想我还不够清楚。不过还是要谢谢你;)另请注意
.md switch
将返回
null
。有效的选择器是
md switch.md bar
(非类)@AndreiGheorghiu-感谢提供的解决方案。但是请注意,在
md开关.md thumb
选择器上,它必须也是
背景色
属性非
颜色
仅当有人使用涟漪效果时:
md开关.md墨水涟漪{颜色:rgb(255,0,0);/*未选择开关涟漪颜色*/}md-switch.md-checked.md墨水涟漪{颜色:rgb(92184,92);/*所选开关波纹颜色*/}
md-switch[disabled].my-custom-theme .md-bar {...}