Question

如何在自己的组件sass文件中使用Angular Material UI提供的默认颜色？

我有自己的信息显示组件，我只想将组件的颜色设置为当前的主色和强调色，但是我发现的所有内容都与“主题”有关，我不想仅以主题为主题要使用提供的现有颜色吗？

我正在使用最新的Angular 9。

Answer 1

使用Material 2或更高版本时，要弄清楚如何在组件的Sass文件中使用$ primary，$ accent和$ warn颜色。这是我发现的最简单的方法：

制作标准样式文件（例如variables.sass在主文件夹中）：

// Import material theming functions
@import '~@angular/material/theming'

// Copy the palettes from your selected theme (usually theme.sass).
$app-primary: mat-palette($mat-grey)
$app-accent:  mat-palette($mat-light-blue)
$app-warn:    mat-palette($mat-pink)

// Create your Sass color vars (will be available in all the project)
$primary: mat-color($app-primary)
$accent: mat-color($app-accent)
$warn: mat-color($app-warn)

在your.component.scss中：

// Import variables.sass to the component's sass file where you want to use it.
@import "~variables.sass"
.selected 
  background-color: $accent

请不要忘记在.angular-cli.json文件中包含theme.scss：

{
...
  "apps": [{
  ...
  "styles": ["_variables.scss"]
  }]
  ...
}

如何使用默认的材质UI调色板颜色？

1 个答案: