Как изменить порядок импорта Angular Material 2 CSS?

В приложении Angular 2, построенном с Angular CLI, я установил Angular 2 Компоненты материалов в соответствии с официальным руководством по установке.

Angular 2 Материал размещает свои основные стили CSS на странице <head> всегда ниже моих пользовательских стилей CSS. Что создает последствия на моей стороне, если мне нужно переопределить их.

Как я могу заставить Angular 2 Material поместить свои основные стили CSS выше стили, которые я определил в моем основном файле CSS (wiki) CLI (записи) CLI?

Ответы

Ответ 1

импортировать тему материала в файле style.css для root:

например.

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

вы можете заменить indigo-pink.css на свой выбор.

Ответ 2

Я думаю, что проблема, с которой вы сталкиваетесь, связана с некоторыми ссылками на ваши css файлы в index.html и с другими в файле angular -cli.json.

Ниже приведен пример моего angular.cli json файла и index.html

Все, что вы указали в index.html, должно пройти до того, что вы определили в файле angular -cli.json. Если вы хотите переупорядочить их, включите ссылки на все файлы css в файле angular -cli.json.

Обратите внимание, что мой файл styles.css - это последнее, что указано в файле angular -cli.json.

Изменить (после повторной перезаписи исходного вопроса)

Я думаю, вам нужно создать свою собственную тему и импортировать ее.

Per Angular Документация по материалам

Для стилизации ваших собственных компонентов с помощью Angular Material tooling, стили компонентов должны быть определены с помощью Sass.

Все, что вам нужно, это создать функцию @mixin в custom-component-theme.scss

См. Angular Документация по материалам Тестирование ваших собственных компонентов и их Theming Guide

Ответ 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);
    }
  }
}

Ответ 4

Да, в материале Angular он динамически добавляет внутренний CSS, когда элемент/компонент получает нагрузку. Таким образом, вы не можете изменить его порядок.

Но чтобы решить вашу проблему, вы можете использовать специфику CSS, чтобы переопределить ее. Вы можете добавить свой собственный класс в тело или в компонент приложения, и с помощью SCSS/CSS вы можете переопределить материал CSS своим собственным CSS.

Вот пример использования SCSS для изменения стиля чекбокса. И имя класса project__app, которое я упомянул в app-компоненте. Вы также можете использовать тело вместо него или создать определенный класс для родительского элемента.

.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;
    }
}