防止全局CSS应用于Angular 5组件

Question

在 .angular-cli.json 文件中，我添加了一些全局样式：

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
    ],

但是我不想将它们应用于特定的组件 - 这可行吗？

编辑1：
不幸的是，在组件样式中覆盖CSS样式是行不通的，因为组件模板中的HTML是从Web API后端获取的 - 我猜我不能实际上覆盖每个可能的类/选择器？

- Kelvin Lai

---

您可以使用样式模板或与组件对应的样式元数据来定义特定于组件的样式，这些样式应该会覆盖全局样式。 - eduPeeth

@eduPeeth 问题已更新。 - Kelvin Lai

请看这个。 - Vikas

Answer 1

您可以使用Angular内置的shadowDom API，从视图封装中。这将使您的组件元素加载到一个单独的DOM树中，因此全局CSS不会影响您的组件元素。

   @Component({
  selector: 'app-root',
  template: `
    <h1 class="head-app">Test Heading</h1>      
  `,
  styles: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
/* . . .

- Smith Livingston

---

完美运作！为什么这不是被接受的答案呢？ - Adam

Answer 2

CSS层叠（因此称为级联样式表）。要实现完整的浏览器支持，您的唯一选择是覆盖选择器。另一个选项，由于IE和Edge缺乏支持而不太常见，是使用“all”属性。

<div class="component-container">
  <!-- your components html template ... -->
</div>

css

.component-container {
  all: initial;
  all: unset;
}

- Stavm

Answer 3

使用组件样式 对于每个你编写的 Angular 组件，你不仅可以定义一个 HTML 模板，还可以定义与该模板相应的 CSS 样式，指定任何你需要的选择器、规则和媒体查询。

其中一种方法是在组件元数据中设置 styles 属性。styles 属性接受一个包含 CSS 代码的字符串数组。通常你只需要提供一个字符串，如下面的示例所示：

@Component({
  selector: 'app-root',
  template: `
    <h1>Test Text</h1>      
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class AppComponent {
/* . . . */
}

styleUrls
一个或多个包含CSS样式表的文件的URL，用于在此组件中使用。

styleUrls: string[]

样式
一个或多个内联CSS样式表，用于此组件。

styles: string[]

- Mohammad Daliri

Answer 4

您可以在全局CSS中使用:not选择器。

您需要尝试一下才能获得所需的行为，但应该是类似这样的：

h1:not(.my-specific-class) {
  font-size: 3rem;
}

- Chrillewoodz

---

嘿，有没有关于如何不在特定组件中使用h1的示例？ - Hemang

Answer 5

您可以使用@Component作用域内的styleUrls属性来定义组件级别的样式。请查看下面的代码：

@Component({
selector: 'app-manageUser',
templateUrl: './manageUser.component.html',
styleUrls: ['./manageUser.component.css'],
providers: [UserService]
})

- Abhishek Sharma