Angularjs 材质角度：背景颜色不同的md内容

我在md中定制了主题

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

其中customPallete-是我自己定义的调色板，带有自定义颜色

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

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

... 这里有一些代码。。。

但是背景是一样的，颜色是背景调色板默认配置的“100”。

---

有人知道如何使用$mdthemmingprovider自定义具有不同背景颜色的块吗？

您需要使用

md颜色

-

我用“紫色”作为背景色来说明这一点。我无法让你的“定制托盘”工作

加价

<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>

---

另一种方法是重新编译所需的样式：

angular
    .module("YourModule")
    .config(($mdThemingProvider: IThemingProvider): void => {
        // hack new features in angular-material
        $mdThemingProvider.registerStyles(`
            md-content.md-THEME_NAME-theme {
                color: '{{foreground-1}}';
                background-color: '{{background-color}}';
            }
        `);
    });

因此，您将能够使用调色板中的所有“md-hue-X”

angular
    .module("YourModule")
    .config(($mdThemingProvider: IThemingProvider): void => {
        // hack new features in angular-material
        $mdThemingProvider.registerStyles(`
            md-content.md-THEME_NAME-theme {
                color: '{{foreground-1}}';
                background-color: '{{background-color}}';
            }
        `);
    });