引用这个plunker:
https://plnkr.co/edit/GWsbdDWVvBYNMqyxzlLY?p=preview
我在 styles.css 文件和 src/app.ts 文件中指定了相同的 css。
如果我在 styles.css 中的 css 中注释掉 src/app.ts 中的 css，它就可以工作。
样式.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，它会失败。
源/应用程序.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 似乎表明问题出在 View 封装的某个地方。经过进一步调查，它在某种意义上确实如此。
如果您查看下面的代码，您会发现 md-toolbar 和 md-toolbar-row 的样式附加了一个属性。但是 md-toolbar 和 md-toolbar-row 的 html 不匹配。只有 md-toolbar 具有附加的属性。 md-toolbar-row 没有。我用>>>>>标记了相关的四行。
这就是问题所在，但是:
1. 我是否将其作为错误报告给 Material 设计人员？
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>
最佳答案
Angular 的一个特性是View Encapsulation，这基本上意味着您可以定义仅作用于特定组件的样式，而不会影响任何其他组件。
默认情况下，样式的作用域仅适用于引用它们的组件，但您可以选择覆盖它，通过将组件封装设置为 None 来使它们全局可用。
例如
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
})
*请注意，您需要从 @angular/core 导入 ViewEncapsulation
关于css - 我有一个笨蛋。当我在全局范围内定义我的 css 时，它起作用了。当我在我的组件中定义我的 css 时，它失败了。这是怎么回事？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46044320/