Question

参考这个plunker：

https://plnkr.co/edit/GWsbdDWVvBYNMqyxzlLY?p=preview

我在styles.css文件和src / app.ts文件中指定了相同的css。

如果我在styles.css中的css中发表评论并在src / app.ts中注释掉css，那就可以了。

styles.css的：

/* If these are commented in, and the ones in src/app.ts are 
 * commented out, the three items are spaced appropriately. */
/***
md-toolbar-row {
    justify-content: space-between;
}

md-toolbar {
    justify-content: space-between;
}
***/

如果我在styles.css中注释掉css并在src / app.ts中的css中注释，它就会失败。

的src / app.ts：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <md-toolbar color="primary">
        <span><md-icon>mood</md-icon></span>

        <span>Yay, Material in Angular 2!</span>

        <button md-icon-button>
          <md-icon>more_vert</md-icon>
        </button>
      </md-toolbar>
    </div>
  `,
  // If these are commented in, and the ones in style.css are 
  // commented out, the three items are scrunched together.
  /***/
  styles: [
    `md-toolbar-row {
        justify-content: space-between;
    }`, 
    `md-toolbar {
        justify-content: space-between;
    }`
  ]
  /***/
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

我在查看为整个应用程序定义css与特定组件之间的区别时遇到了麻烦。有人能告诉我发生了什么事吗？

=================================

@ bryan60和@ Steveland83似乎表明问题出在视图封装的某个地方。经过进一步调查，它确实存在。

如果查看下面的代码，您会看到md-toolbar和md-toolbar-row的样式附加了一个属性。但是md-toolbar和md-toolbar-row的html不匹配。只有md-toolbar附加了属性。 md-toolbar-row没有。我用＆gt;＆gt;＆gt;＆gt;＆gt;标记了相关的四行。

这就是问题但是：
1.我是否将其作为错误报告给材料设计人员？ 2.我今天可以使用一些解决方法吗？

<html>
<head>
        : 
  <script src="config.js"></script>
    <script>
        System.import('app')
            .catch(console.error.bind(console));
    </script>
    <link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
    <style>
>>>>>   md-toolbar-row[_ngcontent-c0] {
            justify-content: space-between;
        }
    </style>
    <style>
>>>>>   md-toolbar[_ngcontent-c0] {
            justify-content: space-between;
        }
    </style>
    <style>
        .mat-toolbar {
            display: flex;
                :       : 
          .mat-mini-fab,
            .mat-raised-button {
                outline: solid 1px
            }
        }
    </style>
</head>
<body class="mat-app-background">
    <my-app _nghost-c0="" ng-version="4.4.0-RC.0">
        <div _ngcontent-c0="">
            <h2 _ngcontent-c0="">Hello Angular! v4.4.0-RC.0</h2>
>>>>>       <md-toolbar _ngcontent-c0="" class="mat-toolbar mat-primary" color="primary" role="toolbar" ng-reflect-color="primary">
                <div class="mat-toolbar-layout">
>>>>>               <md-toolbar-row class="mat-toolbar-row">
                        <span _ngcontent-c0=""><md-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">mood</md-icon></span>

                        <span _ngcontent-c0="">Yay, Material in Angular 2!</span>

                        <button _ngcontent-c0="" class="mat-icon-button" md-icon-button=""><span class="mat-button-wrapper">
          <md-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">more_vert</md-icon>
        </span>
                            <div class="mat-button-ripple mat-ripple mat-button-ripple-round" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]" ng-reflect-centered="true" ng-reflect-disabled="false"></div>
                            <div class="mat-button-focus-overlay"></div>
                        </button>
                    </md-toolbar-row>
                </div>
            </md-toolbar>
        </div>
    </my-app>
</body>
</html>

Answer 1

Angular特性之一是View Encapsulation，这基本上意味着您可以定义仅限于特定组件的样式，而不会影响任何其他组件。

默认情况下，样式的范围仅限于它们所引用的组件，但您可以通过将组件封装设置为None来选择覆盖它们以使它们全局可用。

E.g。

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'component-that-shares-styles',
  templateUrl: './component-that-shares-styles.component.html',
  styleUrls: ['./component-that-shares-styles.component.scss'],
  encapsulation: ViewEncapsulation.None // <-- Set encapsulation here
})

*请注意，您需要从ViewEncapsulation

导入@angular/core

Answer 2

好的，在@ Steveland83和@ bryon60的帮助下，我得到了明确的答案。 Material Design的人都知道这个问题。他们写了一篇文章。

https://github.com/angular/material2/blob/master/guides/customizing-component-styles.md

以下是他们的总结：

设置其他组件的样式

如果您的组件已打开视图封装（默认），则仅包含组件样式影响模板中的顶级子项。属于子组件的HTML元素不能除非您执行以下操作之一，否则请使用组件样式：

将覆盖样式添加到全局样式表。选择器的范围，以便它只影响您需要的具体元素。
关闭组件上的视图封装。如果这样做，请务必确定样式的范围适当地，或者你可能最终偶然地针对你的其他组件应用
使用不推荐使用的阴影穿透后代组合器强制将样式应用于所有子项元素。阅读更多有关此弃用解决方案的信息 Angular documentation。

我不想使用全局css或不推荐使用的解决方案。我想我会用类而不是元素来设计风格。如果有人有更好的主意，请告诉我！

我有一个吸烟者。当我在全球范围内定义我的CSS时，它可以工作。当我在我的组件中定义我的css时，它失败了。发生了什么事？

2 个答案:

设置其他组件的样式