Angular 6 组件没有父样式答案

【问题标题】：Angular 6 component doesn't get parent stylesAngular 6 组件没有父样式
【发布时间】：2019-09-12 19:09:25
【问题描述】：

更新：例如，我编写了小代码。我如何使用所有样式？如果在子组件的 .scss 文件中使用它，我会遇到错误 - 导入“~styles.scss”；这意味着如果我们在项目中使用引导程序，那么我们不能在子组件中使用 col-lg，但它在父组件中可以正常工作 - 例如。

我的父组件有简单的结构：

Styles.scss（在全局文件夹中）

.row {
background-color: black
}

父.html

<content></content>
<div class="row"></div>

Child.html

<div class="row"></div>

所以我的孩子没有黑色背景，但我的父母有黑色背景，这是怎么回事？

【问题讨论】：

【解决方案1】：

试试：

.row {
    background-color: black !important;
}

【讨论】：

【解决方案2】：

试试

::ng-deep .row {
   background-color: black
 }

【讨论】：

【解决方案3】：

试试

:host ::ng-deep .row {
   background-color: black
}

【讨论】：

【解决方案4】：

尝试在应用程序的索引页面中添加。这是反射变化

索引.html

.row { 背景颜色：黑色！重要 }

【讨论】：

【解决方案5】：

要全局定义样式，请将它们添加到angular.json 文件中的styles 属性中。

...
"assets": ["src/assets", "src/favicon.ico"],
"styles": ["src/Styles.scss"]
...

如果不想将它们用作全局，请关注this answer

【讨论】：