Angular Material Styles Not Appearing in Storybook

Question

I am trying to create a Storybook using the Angular Material library in an nx app but I can't get the styles to appear that come along with the library. So the component renders but there are no styles along with it. I've added the component to Storybook like so:

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

This screenshot shows the Primary Button but doesn't get the correct purple styling.

How do I go about getting something like this import into Storybook so the theme comes through?

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

This is also an nx app so there is no angular.json, but a project.json and a workspace.json. I have try adding the theme to project.json as I have below but doesn't work, I would assume it needs to passed to storybook directly somehow and not inside of the project.json (which would apply to the app itself and not storybook)?

"build": {
      "options": {
        "styles": [
          "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
        ],
        "scripts": []
      }
    },

Using Angular Material "13.2.3", "@nrwl/storybook": "13.8.3", and then these additional libraries:

"@storybook/addon-essentials": "6.5.0-alpha.41",
"@storybook/addon-knobs": "6.4.0",
"@storybook/addons": "^6.5.0-alpha.41",
"@storybook/angular": "6.5.0-alpha.41",
"@storybook/api": "6.5.0-alpha.41",
"@storybook/builder-webpack5": "6.5.0-alpha.41",
"@storybook/core-server": "6.5.0-alpha.41",
"@storybook/manager-webpack5": "6.5.0-alpha.41",

Any help is much appreciated!

score 4 · Answer 1 · answered Jan 05 '23 at 12:58

4

In your project.json there should be a storybook target. That's where you need to add styles.

build only affects the build target.

e.g.

   "storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "port": 4400,
        "configDir": "libs/shared/form-controls-ui/.storybook",
        "browserTarget": "shared-form-controls-ui:build-storybook",
        "compodoc": false,
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
        ]
      },

answered Jan 05 '23 at 12:58

Andrew Allen

6,512
5
30
73

I had ../node_modules and I had to change it to ./node_modules. Notice the double dot to single dot difference – J King Jan 20 '23 at 05:19
My answer seems to be the cause of a uncaught TypeError. Storybook runs with theming but error appears in console – Andrew Allen Jan 31 '23 at 16:26
This is the best way to go. – Ahmet Emrebas Jul 31 '23 at 21:47

score 0 · Answer 2 · answered Jul 25 '22 at 15:49

Maybe is a little bit too late but here is what I've done.

I've created a styles.scss file in the root of the project, inside it I've imported @import '~@angular/material/theming'; @include mat-core();

and then I've imported it into scss of the component.

You can skip the scss in the root and 1just import material into the component's scss.

Cheers!

Angular Material Styles Not Appearing in Storybook

2 Answers2