具有自定义名称和颜色的角度主题调色板设置

如何解决具有自定义名称和颜色的角度主题调色板设置

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

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

@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,700);

然后：

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

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

然后我像这样在 src/my-theme.scss 中添加路径 angular.json：

"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 并使用 _theming.scss，我不确定具体如何，但类似于：

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

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

发生未处理的异常：ENOENT：没有这样的文件或目录， lstat '..\src\my-theme.scss' 参见“..\ng-hZt0fz\angular-errors.log” 更多详情。

[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)

解决方法

此 $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);
}

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

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

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