Question

在配置块中，我有：

 .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$mdThemingProvider', function ($urlRouterProvider, $stateProvider, $locationProvider, $mdThemingProvider) {


    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $mdThemingProvider.theme('altTheme')
      .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
      })
      .accentPalette('purple', {
        'default': '200' // use shade 200 for default, and keep all other shades the same
      });

    $mdThemingProvider.setDefaultTheme('altTheme');
    $mdThemingProvider.alwaysWatchTheme(true);

在HTML中：

<header>
  <md-toolbar class="md-hue-1">
    <div layout="row" layout-align="center center" flex>
      Beauty Plus Marketing
    </div>
  </md-toolbar>
</header>

但是，没有应用任何背景。

这是我在浏览器中看到的风格：

    md-toolbar.md-altTheme-theme.md-hue-1:not(.md-menu-toolbar) {
    background-color: rgb(248,187,208);
    color: rgba(0,0,0,0.87);
}

<style>…</style>
md-toolbar.md-altTheme-theme:not(.md-menu-toolbar) {
    background-color: rgb(236,64,122);
    color: rgba(255,255,255,0.87);
}

我使用凉亭安装了角质材料，但是我没有看到CSS部分在这里工作。我在这里做错了什么？

Answer 1

我想您忘记链接index.html文件中的css文件路径。

<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
</head>
    <body ng-app="YourApp">

    <div ng-controller="YourController">

    </div>

    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-aria/angular-aria.js"></script>
    <script src="/bower_components/angular-animate/angular-animate.js"></script>
    <script src="/bower_components/angular-material/angular-material.js"></script>
    <script>

        // Include app dependency on ngMaterial

        angular.module( 'YourApp', [ 'ngMaterial' ] )
            .controller("YourController", YourController );

    </script>

</body>
</html>

您也可以参考此链接：https://github.com/angular/bower-material

角材料主题不起作用

1 个答案: