在 Nx Monorepo 中将 Angular 材质添加到 Lib答案

【问题标题】：Add Angular Material to Lib in Nx Monorepo在 Nx Monorepo 中将 Angular 材质添加到 Lib
【发布时间】：2022-08-08 23:44:11
【问题描述】：

我正在尝试查看 Angular Material Button 的故事。但是，在故事中，按钮没有任何样式。我使用：ng add angular/material 导入了角材料，这些是我的组件文件：

这是html文件：

<button mat-button color=\"primary\">Button Material</button>

这是我的 lib 的模块：

import { NgModule } from \'@angular/core\';
import { CommonModule } from \'@angular/common\';
import { RouterModule, Route } from \'@angular/router\';
import { ElementComponent } from \'./element/element.component\';
import {MatButtonModule} from \'@angular/material/button\';
import { MaterialComponent } from \'./material/material.component\';
import { BrowserAnimationsModule } from \'@angular/platform-browser/animations\';


export const plateRoutes: Route[] = [];

@NgModule({
  imports: [CommonModule, RouterModule,BrowserAnimationsModule, MatButtonModule],
  declarations: [
    ElementComponent,
    MaterialComponent,

  ],
})
export class PlateModule {}

这是组件故事：

如您所见，该样式不适用于垫按钮...

标签： angular-material storybook

【解决方案1】：

在您的 MaterialComponent 中，您必须导入 Button 的材质模块

import { MatButtonModule } from '@angular/material/button';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

import { ButtonComponent } from './button.component';

export default {
  title: 'button',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [MatButtonModule],
    }),
  ],
} as Meta<ButtonComponent>;

在此之后，您需要在故事书的构建步骤中添加样式


{
...
 "build-storybook": {
   ...
   "options": {
     "styles": [
       // the style that you should import
       "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
     ]
   },
 }
...
}

【讨论】：