Question

我在md-angular

中定制了主题

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

但是背景是相同的，从backgroundPalette的默认配置颜色是'100'。有人知道如何使用 $ mdThemingProvider 自定义具有不同背景颜色的块吗？

Answer 1

您需要使用md-colors - CodePen

我用过＆＃34;紫色＆＃34;作为背景颜色来说明这一点。我无法得到你的＆＃34; customPallete＆＃34;工作。

标记

<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

Answer 2

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

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

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

2 个答案: