angularjs - Material Angular : md-content with different colour of background

Question

我在 md-angular 中自定义了主题

$mdThemingProvider.theme('default')
    .backgroundPalette('customPallete', {
        'default': '200',
        'hue-1': '300',
        'hue-2': '500',
        'hue-3': '700'
});

customPallete - 是我自己定义的带有自定义颜色的调色板。

背景色“200”已成功应用于 md-content。但是我不能为其他一些组件添加另一种颜色的背景。例如，我想用一些数据创建另一个色 block 。这是代码

<md-content class="md-hue-3">
 ... some code here ...
</md-content>

但是背景是一样的，颜色是 backgroundPalette 默认配置的“100”。有人知道如何使用 $mdThemingProvider 自定义具有不同背景颜色的 block 吗？

Answer 1

您需要使用md-colors - CodePen

我使用“紫色”作为背景颜色来说明这一点。我无法让您的“customPallete”工作。

标记

<div layout="column" ng-cloak="" class="md-padding colorsdemoBasicUsage" ng-app="MyApp">
  <md-content md-colors="{background: 'default-background-hue-3'}" style="height:100px">
  </md-content>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('brown')
      .accentPalette('green')
      .backgroundPalette('purple')
  });

https://material.angularjs.org/latest/demo/colors https://material.angularjs.org/latest/api/directive/mdColors