javascript - Angular 元素中的 CSS 不适用，除非放在/src 目录中

Question

问题:

---

我有一个有很多组件和子组件的 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 都正确适用，但适用于所有组件。这不是问题，除非某些组件必须共享命名约定，而且我无法指定我不是指 [col-id="car"]。在 table2.component.ts而是[col-id="car"]在 table5.component.ts .

编辑:

这是我正在谈论的例子:

我现在的网格是这样的:

给定列中的所有单元格共享 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;
}

我希望我会看到列 Yard Seq其中有 col-id="yard_seq"右对齐。实际上，当我将此语句添加到 slab-grid.component.css 时， 没有什么变化。但是，如果我转到位于 src/styles.css 中的元素的主 css 文件并添加相同的语句，我得到以下结果:

问题:

---

• 如果放置在 src/<component-name>/<component-name>.component.css 中，为什么我的 CSS 并不总是适用于相关组件？

或

• 有没有办法制作src/styles.css的元素？仅在呈现某些组件时才应用于页面？

解决方案:

---

我已经找到了解决此问题的可接受的解决方案。如果我自己修改 /src来自 [col-id="thk"] 的样式选择器使用后代选择器 .slab-grid [col-id="thk"] , 然后我可以用 !important 使我的样式覆盖冲突的样式无需编辑冲突文件。

Answer 1

每个组件都有自己的样式，如果你想在多个组件之间共享相同的样式，你必须创建一个共享的 CSS 文件，然后在 styles.css 上导入该文件，或者更好的解决方案是在 angular.xml 上添加共享的 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"
            ]