CODEWITHSUNDEEP
angular-materialangular-clistorybooknrwl-nxangular-storybook
bschmitty
bschmitty

Reputation: 1218

Angular Material Styles Not Appearing in Storybook

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.

enter image description here

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!

Upvotes: 7

Views: 3729

Answers (2)

Andrew Allen
Andrew Allen

Reputation: 8002

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"
        ]
      },

Upvotes: 6

Pablo Hernandez
Pablo Hernandez

Reputation: 11

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!

Upvotes: 0

Related Questions