Angular 如何更改角度材质2 CSS导入顺序？

在Angular 2应用程序中，使用构建，我设置了以下内容

Angular 2 Material将其主要CSS样式放置在页面

始终下方的我的自定义CSS样式中。如果我需要推翻它们，这会对我产生影响

如何强制Angular 2材质将其核心CSS样式置于我在Angular CLI主（条目）CSS文件中定义的样式之上

---

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

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

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

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

---

编辑（重新阅读原始问题后）

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

根据角材料的文件

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

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

---

请参见上的Angle Material文档及其根目录下style.css文件中的导入材质主题：

e、 g

---

您可以根据自己的选择替换indigo-pink.css。

我通过在加载视图后加载自定义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);
    }
  }
}

---

是的，在Angular material中，当元素/组件加载时，它会动态添加intern CSS。因此，您不能更改其顺序

但是为了解决您的问题，您可以使用CSS特性来覆盖它。 您可以在body或app组件中添加自定义类，通过使用SCSS/CSS，您可以使用自己的CSS覆盖材质CSS

下面是使用SCS更改复选框样式的示例。和

project\uuuu app

类名，我在app组件中提到过。您也可以使用body代替它，或者在元素的父级上创建特定的类

.project\uuu应用程序
{
/*复选框自定义*/
.mat复选框布局
{
边缘底部：0px；
}
.mat复选框内容器
{
高度：20px；
宽度：20px；
}
.mat复选框框{
边框颜色：rgba（0,0,0,0.5）；
边框宽度：1px；
}
}

你能展示一下你是如何在.angular.cli.json的样式数组中放置链接的吗？我没有在我的

angular cli.json

中放置任何其他样式表，除了条目（main）app

style.scss

。Angular 2材质在我将其导入我的

app.module.ts

时会自动注入其核心CSS。我想，我很想看看这个问题的答案。通常在cli应用程序的顶部添加链接样式，然后附加组件和模块所需的样式。还有，想知道你想这样做的原因吗？@SaiyaffFarouk嗯，原因是它影响了特异性。假设我需要修改

.mat卡

样式。我把我的修改写在另一个类

.mat-card下——巨大的
。我将这两个类都分配给一个元素。我的
.mat卡--巨大的
不会覆盖
.mat卡的
样式。我需要提高特殊性，以强制
.mat card--mage
覆盖默认的
.mat card
样式。一般来说，这不是一个最好的做法。@KaloyanKosev我在过去也遇到过这样的问题。我想知道是不是因为阴影的缘故？您是否尝试过使用ViewEncapsulation？他说的不是您导入的样式，而是从模块编译的样式，例如
MatButtonModule
。这些内容会自动添加到html中，而无需导入。这不是一个解决方案，而是一种变通方法。但考虑到棱角材料的工作原理，没有更好的方法了。
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);
    }
  }
}