Question

我刚开始使用棱角分明的材料。

我有一个空白页面（基本设置），如下所示：

HTML：

<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  
</head>
<body ng-app="BlankApp" ng-cloak>

<!-- No Content -->

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

JS：

var app = angular.module('BlankApp', ['ngMaterial']);

非常基本。

当我检查元素时，我得到多个me-theme-style，如下所示：

我刚开始使用angularjs，我不确定我是否做错了。

任何建议都将不胜感激！

谢谢！

Answer 1

Angular就像一个疯狂的卡通多功能工具，配有冰箱和割草机，但有时你需要的只是一块锡纸。这里的另一个答案，虽然非常有帮助，但在没有了解事情的核心的情况下讨论解决方案，在我看来，这是帮助OP关闭重复。

Direct from the angular material docs

懒惰生成主题

默认情况下，定义时会生成每个主题。您可以使用$mdThemingProvider

在配置部分中禁用此功能

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        //disable theme generation
        $mdThemingProvider.generateThemesOnDemand(true);
    });

这是我使用的确切语法，它就像一个冠军。（重要的是要注意这并没有破坏我们的任何风格）：

.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
}])

Answer 2

根据你应该使用的标准，主题概念，如果你使用材料角js。这是整个想法。

默认情况下，您的Angular Material应用程序将使用默认主题，即为意图组预先配置以下调色板的主题：

primary - indigo accent - pink warn - 红色背景 - 灰色（注意白色在此调色板中）默认主题的配置是在应用程序配置期间使用$ mdThemingProvider完成的。

您可以通过调用适当的配置方法（theme.primaryPalette，theme.accentPalette，theme.warnPalette，theme.backgroundPalette）为指定的颜色意图指定调色板。

来自官方网站的材料角度：

       angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {

  $mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });
});

相信我，你的代码会得到更好的润滑。请按照：

Answer 3

angularjs实际上不是问题，angular-material也不是问题。这是angular-material以编程方式生成应用程序主题的方式。在这种情况下，它是默认主题，但如果您使用angular-material配置指定一个，它将生成您的自定义主题而不是默认主题。

最后，它只是一个功能，允许您从应用程序中创建主题，如：

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {

        $mdThemingProvider.theme('default')
            .primaryPalette('pink')
            .accentPalette('orange');
    });

Angular multiple md-theme-styles

3 个答案: