【发布时间】：2019-08-26 18:33:22
【问题描述】：
问题：
我有一个有很多组件和子组件的 Angular 应用程序。这些是通过运行ng generate component <component-name> 生成的，因此每个都具有相同样式的组件标签：
@Component({
selector: 'app-<component-name>',
templateUrl: './<component-name>.component.html',
styleUrls: ['./<component-name>.component.css']
})
我的理解是所有与这个组件相关的CSS都应该放在src/<component-name>/<component-name>.component.css中，并且应该在组件渲染的时候自动应用到该组件上。
但情况似乎并非如此，因为当我在该 CSS 文件中放入某些指令时，它们似乎被忽略了。到目前为止，最引人注目的违规者是 text-align 和任何类型的 color 标签，而像 font-family 或 vw/vh 这样的标签可以正常工作。
另一方面，当我将我的 CSS 放入像 src/styles.css 这样的文件中并为此文件在 index.html 中导入时，我在那里的任何 CSS 都会正确应用，但会应用到所有组件。这不会是一个问题，除非某些组件必须共享命名约定，而且我无法指定我的意思不是 table2.component.ts 中的 [col-id="car"] 而是 table5.component.ts 中的 [col-id="car"]。
编辑：
下面是我所说的一个例子：
我当前的网格如下所示：
给定列中的所有单元格共享col-id 标签的值：
我的slab-grid.component.css 文件包含网格本身的大小说明和字体说明符：
.slab-grid {
width: 45vw;
height: 80vh;
font-family: monospace;
}
我知道这些都适用，因为如果我删除大小定义，网格变为 1px x 1px，如果我删除 font-family，整个网格会变回正常字体，如下所示。列“Thk”没有变回，因为应用程序另一部分的另一个网格具有相同的col-id，并且总体styles.css 文件包含[col-id="thk"] 的定义：
所以在我的理解中，如果我将以下语句添加到slab-grid.component.css
[col-id="yard_seq"] {
text-align: right;
}
我希望我会看到具有col-id="yard_seq" 的列Yard Seq 右对齐。实际上，当我将此语句添加到 slab-grid.component.css 时，没有任何变化。但是，如果我转到位于 src/styles.css 的项目的主 css 文件并添加相同的语句，我会得到以下结果：
问题：
- 如果我的 CSS 放在
src/<component-name>/<component-name>.component.css中，为什么我的 CSS 并不总是适用于相关组件？
或
- 有没有办法让
src/styles.css的元素仅在渲染某些组件时才应用于页面？
解决方案：
我找到了一个可接受的解决方案来解决这个问题。如果我从[col-id="thk"] 修改我自己的/src 样式选择器以使用后代选择器.slab-grid [col-id="thk"]，那么我可以使用!important 使我的样式覆盖冲突的样式，而无需编辑冲突的文件。
【问题讨论】：
-
全局样式表中的东西应该被全局应用，如果你需要定位它，你需要使用适当的选择器。你能提供一个minimal reproducible example 一些没有被应用的作用域组件CSS吗？
-
当你有嵌套组件时，也许你应该在某些 css 文件中使用 :host /deep/
-
@jonrsharpe 如果您可以向我指出一个在线资源，它可以让我在 plunkr 或 jsfiddle 之类的东西上使用“ag-grid-angular”包，那么我绝对可以。但我没有看到其中一个可以使用“ag-grid-angular”。
-
@WalterWhite 看起来像 /deep/ 已经过时了，并且 :host() 不能解决问题
-
您对 css 应该放在该文件中并自动应用的理解是正确的。你可以在angular.io/tutorial/toh-pt2 的 TourOfHeroes 教程中看到一个这样的例子（包括颜色）。因此，正如@johnrsharpe 所说，您需要将您的特定案例缩小到最小完整可验证示例。
标签： javascript html css angular ag-grid