角度材料样式问题

Question

我正在尝试为角度材质控件创建一些样式更改。通过阅读Angular材质文档，我意识到这样做的方法是创建一个Sass文件，其中包含一些特定的声明，以便更改主题中使用的颜色。

不幸的是，对于您可以在角度材质控件中更改什么，或者确切地说，您需要更改哪些选择器才能更改特定的内容，有很多不清楚的地方。没有示例说明要在_theming.scss文件中更改哪些内容，也没有示例说明要更改哪些内容，或者在您可以添加的自定义混合中添加哪些内容。

例如:不清楚在哪里更改"primary“的颜色。SCSS文件中有一个条目

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

但是$theme或primary设置为的实际颜色在哪里？

另外:我希望能够对特定的控件进行自定义颜色更改，这些控件不是主要的、重音、警告等，而是使用自定义定义。我还想更改除颜色之外的控件属性--比如控件的宽度、对齐方式、可能添加边框等。我完全找不到关于如何进行此类更改的文档。

有人能给点建议吗？我需要更多关于制作角度材料组件和控件的自定义样式的信息。

更新:根据Valeriy Katkov的评论，我将包含我的_theming.scss文件的部分内容--这与他提供的内容完全不同( Angular的人员显然不仅对代码做了彻底的更改，而且在不同版本中对样式也做了根本性的更改！)。我只能包含其中的一部分，因为文件太大了，似乎没有办法将完整的内容附加到这个问题中。

很明显，更改样式根本不是一个简单的过程。显然，实现这一点的方法是深入研究SCSS和(有时) 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

我找到的角度材质主题信息的最好来源是主题文件本身node_modules\@angular\material\_theming.scss。当然，我们假设您已经看过Theming指南和Custom 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 object或mat-light-theme() function。

在src/theme.scss文件的底部配置了mat-toolbar主题和排版。您可以为所有组件使用单个主题，如果需要，也可以使用不同的组件。别忘了在你使用的所有组件中包含主题。

关于其他属性，比如border-width，据我所知，除了覆盖样式之外，没有内置的方法来配置它们。例如，如果要增加复选框边框宽度：

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

此文件src/theme.scss应导入到您的styles.scss文件中，或者您可以将其添加到angular.json的styles部分。

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