Skip to main content

组件样式

如何为组件引入样式

  1. 在@Component 配置项中的 styles 中写样式，就是普通的 css
@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
  1. 在 @Component 配置项中的 styleUrls 引入外部的 css 文件（推荐）
@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styleUrls: ['./hero-app.component.css']
})

在 @Component 的元数据中指定的样式只会对该组件的模板生效。既不会被模板中嵌入的组件继承，也不会被通过内容投影（如 ng-content）嵌进来的组件继承。（样式模块化特性）

特殊的选择器

:host

每个组件都会关联一个与其组件选择器相匹配的元素(就是在 HTML 中真的会有一个于组件选择器同名的 DOM 元素)。这个元素称为宿主元素，模板会渲染到其中。:host 伪类选择器可用于创建针对宿主元素自身的样式，而不是针对宿主内部的那些元素。

应用于此选择器的任何规则都将影响宿主元素及其所有后代（这个影响是继承而来的）（在这种情况下，将所有包含的文本斜体）

一般用于我们想修改一些第三方组件的样式，而且仅仅会影响当前组件中使用的第三方组件的样式

:host {
  font-style: italic;
}

/* 修改当前组件中 .ant-select-selection-search input的样式 */
:host ::ng-deep .ant-select-selection-search input {
  padding: 0;
  width: auto;
}

:host 选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。

:host 选择器也可以与其他选择器组合使用。在 :host 后面添加选择器以选择子元素，例如，使用 :host h2 定位组件视图内的 <h2>。

不应该在 :host 选择器前面添加除 :host-context 之外的选择器来试图基于组件视图的外部上下文为本组件设置样式。因为此类选择器的作用域不会限于组件的视图，而是会选择外部上下文，但这不是内置的行为。请改用 :host-context 选择器。

:host-context

以某些来自宿主的祖先元素为条件来决定是否要应用某些样式。

这时可以使用 :host-context() 伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。它只能与其它选择器组合使用。

在下面的例子中，只有当该组件的某个祖先元素有 CSS 类 active 时，才会把该组件内部的所有文本置为斜体。

:host-context(.active) {
  font-style: italic;
}

注意，只有宿主元素及其各级子节点会受到影响，不包括加上 active 类的这个节点的祖先。

::ng-deep

把伪类 ::ng-deep 应用到任何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式(类似于 css modules 中的 :global(.class-name))。为了把指定的样式限定在当前组件及其下级组件中，请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用，该样式就会污染其它组件。

:host ::ng-deep h3 {
  font-style: italic;
}

这个例子以所有的 <h3> 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素

CSS 的 @import 语法

可以利用标准的 CSS @import 规则来把其它 CSS 文件导入到 CSS 文件中。

在这种情况下，URL 是相对于你正在导入的 CSS 文件的。

外部以及全局的 CSS 样式

当使用 CLI 进行构建时，你必须配置 angular.json 文件，使其包含所有外部资源（包括外部的样式表文件）。

在它的 styles 注册这些全局样式文件，默认情况下，它会有一个预先配置的全局 styles.css 文件。

对于组件的 styleUrls 可以链入非 CSS 的样式文件，但是对于 styles 里写的样式则只能使用 CSS 语法，因为 CLI 没法对这些内联的样式使用任何 CSS 预处理器