Angular 1.6.4 中的 md-colors 指令问题答案

【问题标题】：Issue with md-colors directive in Angular 1.6.4Angular 1.6.4 中的 md-colors 指令问题
【发布时间】：2017-10-31 00:28:57
【问题描述】：

我无法在md-fab 中添加md-colors 指令。 md-fab 默认采用 accent-A200 颜色，我无法使用自定义主题更改它。我不想改用常规 CSS md-colors。

这里是 md-color 的文档：https://material.angularjs.org/1.1.0/api/directive/mdColors

一切都符合我的主题。

这里是主题角度的文档：https://material.angularjs.org/1.1.0/Theming/03_configuring_a_theme

我做错了什么？

我无法在 JSFiddle/Plunker 上提供我的所有应用程序。下面是一段代码。如果您需要更多，请告诉我。

谢谢大家:)

HTML 部分

<div md-colors="{background-color: 'rouge-A100'}" class="ajouter-membre-container">
    <md-button href=""  class="md-fab md-mini md-warn md-fab--equipe"> 
       <md-icon md-svg-src="/img/icones/add.svg"></md-icon>
    </md-button>
</div>

主题部分

$mdThemingProvider.definePalette('rouge', {
        '50': 'fde4e6',
        '100': 'fabbc1',
        '200': 'f68e97',
        '300': 'f2606d',
        '400': 'f03e4e',
        '500': 'ed1c2f',
        '600': 'eb192a',
        '700': 'e81423',
        '800': 'e5111d',
        '900': 'e00912',
        'A100': 'ffffff',
        'A200': 'ffd7d8',
        'A400': 'ffa4a6',
        'A700': 'ff8b8d',
        'contrastDefaultColor': 'light'

    });
    $mdThemingProvider.theme('myTheme')
        .accentPalette('rouge')

    $mdThemingProvider.definePalette('vert', {
        '50': 'e0f5f4',
        '100': 'b3e7e4',
        '200': '80d7d3',
        '300': '4dc7c1',
        '400': '26bbb3',
        '500': '00afa6',
        '600': '00a89e',
        '700': '009f95',
        '800': '00968b',
        '900': '00867b',
        'A100': 'b3fff7',
        'A200': '80fff2',
        'A400': '4dffed',
        'A700': '33ffeb',
        'contrastDefaultColor': 'light'

    });
    $mdThemingProvider.theme('myTheme')
        .primaryPalette('vert')


    $mdThemingProvider.definePalette('orange', {
        '50': 'fff3eb',
        '100': 'ffe0ce',
        '200': 'ffccad',
        '300': 'ffb88c',
        '400': 'ffa874',
        '500': 'ff995b',
        '600': 'ff9153',
        '700': 'ff8649',
        '800': 'ff7c40',
        '900': 'ff6b2f',
        'A100': 'ffffff',
        'A200': 'ffffff',
        'A400': 'ffe4da',
        'A700': 'ffd1c1',
        'contrastDefaultColor': 'light'
    });

    $mdThemingProvider.theme('myTheme')
        .warnPalette('orange') 


    $mdThemingProvider.setDefaultTheme('myTheme');
});

【问题讨论】：

为什么不把md-colors放在md-button上？

标签： css angularjs angularjs-directive angular-material

【解决方案1】：

根据我对official documentation的理解，md-colors指令应该放在md-button指令上。

示例

<div class="ajouter-membre-container">
    <md-button md-colors="{ background-color: 'rouge-A100' }" href="" class="md-fab md-mini md-warn md-fab--equipe"> 
       <md-icon md-svg-src="/img/icones/add.svg"></md-icon>
    </md-button>
</div>

【讨论】：