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

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

根据Angular Material first，我遵循并在

src

文件夹目录中创建了

my theme.scss

，如下所示：

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

@include mat-core();

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

我尝试使用

\u 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);

然后：

然后我在

angular.json

中添加path

src/my-theme.scss

，如下所示：

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

@include mat-core();

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

在<代码>我的按钮中使用名称，但按钮不会改变颜色

styles.scs

包括

@import'~@angular/material/theming'

默认情况下，在安装library时，我可能只需要在

样式.scss

中更改某些内容，而不必创建

我的主题.scss

并使用from

\u theming.scss

，我不确定具体如何更改，但类似于：

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

因为看起来我做了一些错误的事情，颜色没有改变，

ng-serve

在添加

src/my-theme.scss

到

angular.json

时抛出错误：

发生未经处理的异常：enoint:没有此类文件或目录， lstat'..\src\my theme.scss'请参阅“.\ng-hZt0fz\angular errors.log”以了解详细信息 进一步详情

[error]错误：enoint:没有这样的文件或目录，lstat'..\src\my theme.scss'
在Object.realpathSync（fs.js:1728:7）
在…\node\u modules\@angular devkit\build angular\src\webpack\configs\styles.js:44:35
在Array.forEach（）处
在Object.getStylesConfig（…\node\u modules\@angular devkit\build angular\src\webpack\configs\styles.js:35:76）
在…\node\u modules\@angular devkit\build angular\src\dev server\index.js:91:23
在GenerateWebBackConfig（…\node\u modules\@angular devkit\build angular\src\utils\webpack browser config.js:45:49）
在处理和拒绝时（内部/process/task_queues.js:93:5）
在异步generateBrowserWebpackConfigFromContext（…\node\u modules\@angular devkit\build angular\src\utils\webpack browser config.js:136:20）
在async Object.generateI18nBrowserWebpackConfigFromContext（…\node_modules\@angular devkit\build angular\src\utils\webpack browser config.js:77:20）
异步设置时（…\node\u modules\@angular devkit\build angular\src\dev server\index.js:87:47）

此

$my-theme-my-name1

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

以下是您如何设计自己的组件。
为按钮创建自定义选择器（id或类），并向其添加主题颜色

范例

/*...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

添加到按钮

my按钮

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

---

说到错误，这显然意味着文件我的主题.scss被删除、删除或重命名。

您是否尝试将其导入globas.scss？您好，很抱歉延迟重播，如果我没有弄错的话。我的自定义btn应该在组件内部使用。scss实际上，您可以创建

组件主题.scss

并仅向其中添加主题样式，然后将其导入全局主题文件，并在普通组件样式表中定义所有剩余样式