Angular 使用自定义名称和颜色的主题调色板设置

Question

我正在尝试在 Angular 应用程序项目中使用 Angular Material 或什至不使用组件库来创建具有唯一名称和颜色的自定义主题调色板。

根据 Angular Material 首先，我按照 Theming your Angular Material app 并在 src 文件夹目录中创建了 my-theme.scss，如下所示：

@import "~@angular/material/theming";

@include mat-core();

我尝试使用来自 _theming.scss 的名字：

$my-theme-my-name1: mat-palette($mat-green, 300, 400, 500, 700);
$my-theme-my-name2: mat-palette($mat-amber, 300, 400, 500, 700);

然后：

$my-theme: mat-palette(
  $my-theme-my-name1,
  $my-theme-my-name2
);

@include angular-material-theme($my-theme);

然后我在 angular.json 中添加路径 src/my-theme.scss，如下所示：

"styles": [
{
   "input": "src/my-theme.scss"
},
"src/styles.scss"
],

并在 <button my-theme-my-name1>My button</button> 中使用名称，但按钮不会改变颜色。

styles.scss 默认情况下包含 @import '~@angular/material/theming'; 安装库，也许我只需要在 styles.scss 中更改某些内容而不创建 my-theme.scss 并使用 from _theming.scss，我不确定具体如何，但类似于：

$my-theme-my-name1: my-palette(#fff, 300, 400, 500, 700);

因为看起来我做错了事，颜色没有改变并且 ng serve 将 src/my-theme.scss 添加到 angular.json 时抛出错误：

An unhandled exception occurred: ENOENT: no such file or directory, lstat '..\src\my-theme.scss' See "..\ng-hZt0fz\angular-errors.log" for further details.

[error] Error: ENOENT: no such file or directory, lstat '...\src\my-theme.scss'
    at Object.realpathSync (fs.js:1728:7)
    at ...\node_modules\@angular-devkit\build-angular\src\webpack\configs\styles.js:44:35
    at Array.forEach (<anonymous>)
    at Object.getStylesConfig (...\node_modules\@angular-devkit\build-angular\src\webpack\configs\styles.js:35:76)
    at ...\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:91:23
    at generateWebpackConfig (...\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:45:49)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async generateBrowserWebpackConfigFromContext (...\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:136:20)
    at async Object.generateI18nBrowserWebpackConfigFromContext (...\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:77:20)
    at async setup (...\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:87:47)

Answer 1

此 $my-theme-my-name1 是一个 sass 变量，将其作为属性直接添加到按钮不会为您的按钮设置样式。（您不能在 HTML 或 TS 中引用 sass 变量）。

您可以通过以下方式设置自己的组件样式。
为您的按钮创建自定义选择器（id 或 class）并为其添加主题颜色。

例子

/*...necessary imports*/
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);

$candy-app-theme: mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,  
  )
));

@include angular-material-theme($candy-app-theme); //This will make sure to style material components    
.my-custom-btn {
  background-color: mat-color($candy-app-primary);
  color: mat-color($candy-app-primary, default-contrast);
}

现在将 class my-custom-btn 添加到按钮 <button class="my-custom-btn">My button</button>

以上只是一个示例，建议创建自己的 mixin 来为自己的组件设置样式。

出现错误，这显然意味着文件 my-theme.scss 被删除、删除或重命名。

Angular 使用自定义名称和颜色的主题调色板设置

Angular theming palette setup with custom names and colors

css

angular

angular-material

theming