防止全局 CSS 在 Angular 5 中应用组件

Posted 2023-02-22

【中文标题】防止全局 CSS 在 Angular 5 中应用组件

【英文标题】：Prevent global CSS being applied a component in Angular 5

【发布时间】：2018-12-13 11:15:58

【问题描述】：

在.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 后端获取的 - 我想我无法真正覆盖所有可能的类/选择器？

【问题讨论】：

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

@eduPeeth 问题已更新。

看看this

【参考方案1】：

CSS 级联（因此称为级联样式表）。 要获得完整的浏览器支持，您唯一的选择是覆盖选择器。

另一个选项，由于缺乏对 IE 和 Edge 的支持，不那么常见， 是all 属性。

html

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

css

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

【参考方案2】：

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

一种方法是在组件元数据中设置样式属性。 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[]

【参考方案3】：

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

您必须使用它来获得所需的行为，但它应该是这样的：

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

【讨论】：

嘿，关于如何不将 h1 用于特定组件的任何示例？

【参考方案4】：

您可以使用@Component 范围内的 styleUrls 属性在组件级别定义样式。请看下面的代码：-

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