如何更改Angular Material 2 CSS导入顺序？

Question

在使用Angular CLI构建的Angular 2应用程序中，我按照官方安装指南设置了Angular 2 Material组件。

Angular 2 Material将其主要CSS样式放在页面<head>始终位于我的自定义CSS样式之下。 如果我需要覆盖它们，这会对我产生影响。

如何强制Angular 2 Material将其核心CSS样式置于我在Angular CLI main（entry）CSS文件中定义的样式之上？

Answer 1

在root上的style.css文件中导入材质主题：

例如

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

你可以替换indigo-pink.css自己的选择。

Answer 2

我认为您遇到的问题是由于在index.html中对您的css文件进行了一些引用，并且在angular-cli.json文件中有其他文件。

下面是我的angular.cli json文件和index.html的示例

无论你在index.html中定义了什么，都要在angular-cli.json文件中定义的内容之前。 如果要对它们重新排序，请在angular-cli.json文件中包含对所有css文件的引用。

请注意我的styles.css文件是angular-cli.json文件中列出的最后一个文件。

编辑（再次重读原始问题后）

我认为你需要创建自己的自定义主题并导入它。

Per Angular Material的文档

为了使用Angular Material的工具设置自己的组件样式，必须使用Sass定义组件的样式。

您只需要在custom-component-theme.scss中创建一个@mixin函数

请参阅Angular Material关于主题自己组件及其主题指南的文档

Answer 3

我已经解决了加载视图后加载自定义css。

export class AppComponent implements AfterViewInit {

  ngAfterViewInit() {
    this.linkExternalStyleSheet('assets/styles/custom-theme.css');
  }

  linkExternalStyleSheet(externalStyleSheetUrl: string) {
    const overrideStyleSheet: any = document.getElementById('extStyleLink');
    if (overrideStyleSheet) {
      overrideStyleSheet.href = externalStyleSheetUrl;
    } else {
      const link = document.createElement('link');
      link.id = 'extStyleLink';
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.media = 'screen';
      link.href = externalStyleSheetUrl;
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
}

Answer 4

是的，在Angular材质中，它会在元素/组件加载时动态添加实体CSS。 所以，你不能改变它的顺序。

但是要解决您的问题，您可以使用CSS特异性来覆盖它。 您可以在正文或app-component中添加自定义类，使用SCSS / CSS可以使用自己的CSS覆盖材质CSS。

以下是使用SCSS的示例，用于更改复选框样式。 和project__app类名，我在app-component中提到过。 您也可以使用body代替它，或者在元素的父级上创建特定的类。

.project__app
{
    /* checkbox customization */
    .mat-checkbox-layout
    {
        margin-bottom: 0px;
    }
    .mat-checkbox-inner-container
    {
        height: 20px;
        width: 20px;
    }
    .mat-checkbox-frame {
        border-color: rgba(0, 0, 0, 0.5);
        border-width: 1px;
    }
}

如何更改Angular Material 2 CSS导入顺序？

问题描述

4 个解决方案

解决方案1
1 2017-11-10 11:58:14

解决方案2
0 2017-06-05 19:18:48

解决方案3
0 2019-01-09 03:31:04

解决方案4
0 2019-07-22 08:15:22

如何更改Angular Material 2 CSS导入顺序？

问题描述

4 个解决方案

解决方案1 1 2017-11-10 11:58:14

解决方案2 0 2017-06-05 19:18:48

解决方案3 0 2019-01-09 03:31:04

解决方案4 0 2019-07-22 08:15:22

解决方案1
1 2017-11-10 11:58:14

解决方案2
0 2017-06-05 19:18:48

解决方案3
0 2019-01-09 03:31:04

解决方案4
0 2019-07-22 08:15:22