Question

正如您在此片段中看到未注入Angular材质的那样，<div>标记会继承正文的背景颜色。

＆＃13;

angular.module("Test", []);

＆＃13;

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>



<body ng-app="Test" style="background-color: red;">
  {{1+1}}
  <div style="margin-top: 700px;">
    bar
  </div>
</body>

＆＃13;

但是，下面的代码片段已将Angular Material注入Angular Module。现在，<div>代码的背景颜色为白色。

＆＃13;

angular.module("Test", ["ngMaterial"]);

＆＃13;

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>



<body ng-app="Test" style="background-color: red;">
  {{1+1}}
  <div style="margin-top: 700px;">
    bar
  </div>
</body>

＆＃13;

我想知道为什么会发生这种情况，以及如何在不明确为<div>标记指定背景颜色的情况下阻止这种情况。

Answer 1

这是因为Angular材质使用自己的默认主题。即，初级 - 靛蓝口音 - 粉红色警告 - 红色背景 - 白色

因此，您可以更改主题颜色或通知材料不使用其默认主题：

.config(function($mdThemingProvider) {
     $mdThemingProvider.theme('default')
     .backgroundPalette('Red')
});

OR

.config(function($mdThemingProvider) {
      $mdThemingProvider.disableTheming();
 });

＆＃13;

 var myApp = angular.module('Test', ['ngMaterial']);
       myApp.config(function($mdThemingProvider) {
            $mdThemingProvider.disableTheming();
        });

＆＃13;

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>



<body ng-app="Test" style="background-color: red;">
  {{1+1}}
  <div style="margin-top: 700px;">
    bar
  </div>
</body>

＆＃13;

角度材料 - 删除空格

1 个答案: