Add Angular Material to Lib in Nx Monorepo - angular-material

Question

I am trying to view a story of an Angular Material Button. However, in the story, the button does not have any styles. I imported angular material using : ng add angular/material and these ara my files for my component :
This is the html file :
<button mat-button color="primary">Button Material</button>
This is the module of my 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 {}
This is the component story :
As you can see the style does not apply to the mat button...

Answer 1

In your MaterialComponent you have to import the material module of 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>;
And after this you will need to add the style in the build step of the storybook
{
...
"build-storybook": {
...
"options": {
"styles": [
// the style that you should import
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
]
},
}
...
}