我正在尝试为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%;
}
答案 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