Import Angular Material Theme in Angular Library with Storybook

Question

I am trying to build a component library with Angular 9, Storybook 5.3 and Angular Material 9. I have a few components that use material components. One example is the Dialog. My problem is that the Dialog is not displayed correctly in Storybook.

I got it to work with Storybook by adding the theme.css to angular.json styles but this won't work for the library.

My second attempt was to directly @import the theme to all my component.css. This did not work.

my-component.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Obviously styleUrls points to my-component.css

Does anyone have a clue how to properly apply the theme to my library? I found a few answers that tell me to copy the styles into the dist-folder but i am not sure if this works for Storybook too.

Answer 1

There was a problem with Angular 9 and Angular material. I upgraded to Version 11 and Storybook 6 and it worked immediatly.