除非放在/ src目录中，否则角度项目中的CSS不适用

Question

问题：

---

我有一个包含许多组件和子组件的角度应用程序。这些是通过运行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都正确地适用于自身，但适用于所有组件。除非某些组件必须共享命名约定，否则这不是问题，并且我无法指定我不是在[col-id="car"]中使用table2.component.ts而是在{{1 }}。

编辑：

以下是我所谈论的例子：

我当前的网格如下：

给定列中的所有单元格共享[col-id="car"]标签的值：

我的table5.component.ts文件包含有关网格本身的大小调整说明以及一个字体说明符：

col-id

我知道这些正确适用，因为如果删除尺寸定义，则网格将变为1px x 1px，如果删除slab-grid.component.css，则整个网格将恢复为正常字体，如下所示。列“ Thk”不会变回来，因为该应用程序另一部分中的另一个网格具有相同的.slab-grid { width: 45vw; height: 80vh; font-family: monospace; } ，并且上方的font-family文件包含了col-id的定义：

因此，根据我的理解，我是否要将以下语句添加到styles.css

[col-id="thk"]

我希望我会看到slab-grid.component.css的列[col-id="yard_seq"] { text-align: right; } 右对齐。实际上，当我将此语句添加到Yard Seq时，没有任何变化。但是，如果我转到位于col-id="yard_seq"上的项目的主CSS文件并添加相同的语句，则会得到以下结果：

问题：

---

• 如果放在slab-grid.component.css中，为什么我的CSS并不总是适用于相关组件？

OR

• 是否有一种方法可以使src/styles.css的元素仅在呈现某些组件时才应用于页面？

解决方案：

---

我已经找到了可以解决此问题的解决方案。如果我从src/<component-name>/<component-name>.component.css修改了自己的src/styles.css样式选择器以使用后代选择器/src，则可以使样式用[col-id="thk"]覆盖冲突样式，而无需编辑冲突的样式文件。

Answer 1

如果要在多个组件之间共享相同的样式，则每个组件都有样式，您必须创建一个共享的CSS文件，然后在styles.css中导入该文件，或者更好的解决方案是在角形上添加共享的CSS文件。 json配置文件。

父组件中的样式不适用于子组件。

仅且仅当您在styles.css上添加相同的样式或在angular.json上包含文件时

示例

            "styles": [
              "src/styles.scss",
              "src/scss/theme.d.scss",
              "src/scss/global-scrollbar.d.scss",
              "src/scss/acrylic.scss",
              "src/scss/buttons.scss",
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js"
            ]