角材料样式问题

时间:2020-04-19 03:34:57

标签: angular sass angular-material

我正在尝试为Angular Material控件创建一些样式更改。通过阅读Angular Material文档,我知道做到这一点的方法是创建一个带有一些特定声明的Sass文件,以更改主题中使用的颜色。

不幸的是,关于可在Angular Material控件中更改的内容,或者为更改特定内容而需要更改的选择器,还有很多不清楚的地方。 _theming.scss文件中没有更改内容的示例,也没有任何示例可以提供更改或添加自定义混合的内容的真实想法。

例如:不清楚您在哪里更改“主要”颜色的确切位置。 SCSS文件中有一个条目

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

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

也:我希望能够对特定控件进行自定义颜色更改,这些控件不是主要控件,强调控件,警告控件等,而是使用自定义定义。我还想更改颜色以外的控件属性-例如控件的宽度,对齐方式,可能添加边框等。我完全找不到有关如何进行此类更改的文档。

有人可以建议吗?我需要有关为Angular Material组件和控件制作自定义样式的更多信息。

更新:根据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%;
  }

1 个答案:

答案 0 :(得分: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对象或mat-light-theme()函数。

src/theme.scss文件mat-toolbar的底部配置了主题和版式。您可以对所有组件使用单个主题,也可以根据需要使用不同的主题。不要忘记为您使用的所有组件包括主题。

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

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

此文件src/theme.scss应该导入到您的styles.scss文件中,或者您可以将其添加到styles的{​​{1}}部分中。

angular.json