[英]How can I use a Material-UI theme palette color in a custom React component?
[英]Angular Material Custom Theme with Custom Palette
我想應用調色板:
這是我當前的主題文件:
@import "~@angular/material/_theming";
@include mat-core();
$app-primary: mat-palette(#46828d);
$app-accent: mat-palette(#276c8a);
$app-warn: mat-palette(yellow);
$app-theme: mat-dark-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);
不知道如何使用 SASS 哈哈
試試這樣。
// Create the theme object (a Sass map containing all of the palettes).
$cdx-app-theme: mat-light-theme($cdx-palette-primary, $cdx-palette-accent, $cdx-palette-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($cdx-app-theme);
// Create aliases to use within your app (Do not override the `$cdx-palette-*` properties)
$my-app-palette-primary: mat-palette(#46828d);
$my-app-palette-accent: mat-palette(#276c8a);
$my-app-palette-warn: mat-palette(yellow);
如果您有疑問,請告訴我。
這就是我最終使用自定義調色板(Angular 9)創建自定義主題的方式
@import "~@angular/material/theming";
@include mat-core();
// generated custom palette
$primary-palette: (
50 : #e9f0f1,
100 : #c7d9dd,
200 : #a2c0c6,
300 : #7da7af,
400 : #61949d,
500 : #45818c,
600 : #3e7984,
700 : #366e79,
800 : #2e646f,
900 : #1f515c,
A100 : #9cecff,
A200 : #69e3ff,
A400 : #36d9ff,
A700 : #1dd4ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$primary: mat-palette($primary-palette);
$secondary: mat-palette($mat-blue);
$warn: mat-palette($mat-yellow);
$theme: mat-dark-theme($primary, $secondary, $warn);
// apply the dark theme
@include angular-material-theme($theme);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.