Angular Материальные проблемы стиля

Question

Я пытаюсь создать некоторые изменения стиля для Angular Контроль материала. Из прочтения документации Angular Material я узнал, что способ сделать это - создать файл Sass с некоторыми определенными c объявлениями, чтобы изменить цвета, используемые в теме.

К сожалению, есть много неясного относительно того, что вы можете изменить в Angular элементах управления материалом, или какие именно селекторы вам нужно изменить, чтобы изменить определенные c вещи. В файле _theming.s css нет примеров того, что нужно изменить, и нет примеров, которые дают реальное представление о том, что изменить или что добавить в пользовательские миксины, которые можно добавить.

Например: неясно, где именно вы меняете цвет на «основной». В файле S CSS есть запись

 $primary: map-get($theme, primary);

, но где указан фактический цвет, для которого $ theme или primary установлен ???

Также: я бы хотел быть возможность вносить пользовательские изменения цвета в указанные c элементы управления, которые не являются основными, accent, warn и т. д. c. но используя пользовательские определения. Я также хотел бы изменить атрибуты элемента управления, отличные от цвета, такие как ширина элемента управления, его выравнивание, возможно, добавить границы и другие вещи. Я не могу найти абсолютно никакой документации о том, как делать такого рода изменения.

Может кто-нибудь, пожалуйста, посоветовать? Мне нужно больше информации о создании пользовательских стилей для Angular Материальных компонентов и элементов управления.

ОБНОВЛЕНИЕ: В свете комментариев Валерия Каткова, я включаю часть содержимого моего файла _theming.s css - который радикально отличается от того, который он предоставил (люди Angular явно внесли радикальные изменения не только в код, но и в стилизацию в своих различных версиях!). Я могу включить его только из-за того, что файл слишком велик, и, кажется, нет способа прикрепить полное содержание к этому вопросу.

Очевидно, что изменение стиля не будет простым процесс вообще. Видимо, способ сделать это - копаться в лабиринте файлов S CSS и (иногда) CSS, чтобы найти то, что вам нужно изменить. Это, на мой взгляд, серьезный недостаток платформы Angular. По крайней мере, должен быть доступен список различных селекторов компонентов Материала и одно место, где они могут быть доступны.

// Import all the theming functionality.
// We can use relative imports for imports from the cdk because we bundle everything
// up into a single flat scss file for material.
// We want overlays to always appear over user content, so set a baseline
// very high z-index for the overlay container, which is where we create the new
// stacking context for all overlays.
$cdk-z-index-overlay-container: 1000 !default;
$cdk-z-index-overlay: 1000 !default;
$cdk-z-index-overlay-backdrop: 1000 !default;

// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;

// Default backdrop animation is based on the Material Design swift-ease-out.
$backdrop-animation-duration: 400ms !default;
$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;


@mixin cdk-overlay() {
  .cdk-overlay-container, .cdk-global-overlay-wrapper {
    // Disable events from being captured on the overlay container.
    pointer-events: none;

    // The container should be the size of the viewport.
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  // The overlay-container is an invisible element which contains all individual overlays.
  .cdk-overlay-container {
    position: fixed;
    z-index: $cdk-z-index-overlay-container;

    &:empty {
      // Hide the element when it doesn't have any child nodes. This doesn't
      // include overlays that have been detached, rather than disposed.
      display: none;
    }
  }

  // We use an extra wrapper element in order to use make the overlay itself a flex item.
  // This makes centering the overlay easy without running into the subpixel rendering
  // problems tied to using `transform` and without interfering with the other position
  // strategies.
  .cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: $cdk-z-index-overlay;
  }

  // A single overlay pane.
  .cdk-overlay-pane {
    // Note: it's important for this one to start off `absolute`,
    // in order for us to be able to measure it correctly.
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $cdk-z-index-overlay;

    // For connected-position overlays, we set `display: flex` in
    // order to force `max-width` and `max-height` to take effect.
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }

Answer 1

Лучшим источником angular информации о материалах, которую я нашел, является сам файл темы node_modules\@angular\material\_theming.scss. Конечно, предполагается, что вы уже посмотрели руководство Theming и руководство Theming Component Theming , если нет, добро пожаловать.

Давайте посмотрим на настройку темы приложения:

// src/theme.scss

@import '~@angular/material/theming';

$typography: mat-typography-config();
@include mat-core($typography);

$background: (
    status-bar: map_get($mat-grey, 300),
    app-bar:    map_get($mat-grey, 100),
    background: #f4f4f4,
    hover:      rgba(black, 0.04),
    card:       white,
    dialog:     white,
    disabled-button: rgba(black, 0.12),
    raised-button: white,
    focused-button: $dark-focused,
    selected-button: map_get($mat-grey, 300),
    selected-disabled-button: map_get($mat-grey, 400),
    disabled-button-toggle: map_get($mat-grey, 200),
    unselected-chip: map_get($mat-grey, 300),
    disabled-list-option: map_get($mat-grey, 200)
);

$foreground: (
    base:              black,
    divider:           $dark-dividers,
    dividers:          $dark-dividers,
    disabled:          $dark-disabled-text,
    disabled-button:   rgba(black, 0.26),
    disabled-text:     $dark-disabled-text,
    hint-text:         $dark-disabled-text,
    secondary-text:    $dark-secondary-text,
    icon:              #848484,
    icons:             #848484,
    text:              #212121,
    slider-min:        rgba(black, 0.87),
    slider-off:        rgba(black, 0.26),
    slider-off-active: rgba(black, 0.38)
);

$theme: (
    primary: mat-palette($mat-blue, 600),
    accent: mat-palette($mat-teal),
    warn: mat-palette($mat-red),
    is-dark: false,
    foreground: $foreground,
    background: $background,
    details: $background
);

// You can use a single theme configuration for all material components
// @include angular-material-theme($theme);
// @include angular-material-typography($typography);

// Or setup them separately, in this case don't forget to
// include themes for all components which your app uses
@include mat-core-theme($theme);
@include mat-toolbar-theme($theme);
@include mat-toolbar-typography($theme);

Как видите, $theme и $typography - это просто объекты, в которых хранятся цвета и другие свойства темы. В _theme.scss имеется несколько предварительно настроенных настроек, например, $mat-dark-theme-foreground объект или mat-light-theme() функция.

В нижней части src/theme.scss file mat-toolbar настраиваются тема и типографика. Вы можете использовать одну тему для всех компонентов или разные, если это необходимо. Не забудьте включить темы для всех компонентов, которые вы используете.

Что касается других свойств, таких как, например, border-width, так как я знаю, что нет встроенного способа их настройки, кроме переопределения стиля. Например, если вы хотите увеличить ширину границы флажка:

.mat-checkbox-frame {
  border-width: 3px !important;
}

Этот файл src/theme.scss должен быть импортирован в ваш файл styles.scss, или вы можете добавить его в раздел styles вашего angular.json.

// src/styles.scss
@import 'theme.scss';
...