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后端获取的-我想我无法实际覆盖每个可能的类/选择器？

Answer 1

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

另一种选择，由于缺乏对IE和Edge的支持而不太常见，是all属性。

html

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

css

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

Answer 2

使用组件样式对于您编写的每个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[]

Answer 3

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

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

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

Answer 4

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

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

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

4 个答案: