Storybook 中未出现 Angular 材质样式答案

【问题标题】：Angular Material Styles Not Appearing in StorybookStorybook 中未出现 Angular 材质样式
【发布时间】：2022-07-25 23:49:04
【问题描述】：

我正在尝试使用 nx 应用程序中的 Angular Material 库创建一个故事书，但我无法获得与库一起出现的样式。所以组件渲染但没有样式。我已将组件添加到 Storybook 中，如下所示：

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

此屏幕截图显示了主按钮，但没有得到正确的紫色样式。

我如何才能将这样的内容导入 Storybook 以便主题通过？

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

这也是一个nx 应用程序，所以没有angular.json，而是一个project.json 和一个workspace.json。我尝试将主题添加到project.json，如下所示但不起作用，我认为它需要以某种方式直接传递给故事书，而不是在 project.json 内部（这将适用于应用程序本身而不是故事书)?

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

使用Angular Material "13.2.3"、"@nrwl/storybook": "13.8.3"，然后使用这些附加库：

"@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",

非常感谢任何帮助！

【问题讨论】：

标签： angular-material angular-cli storybook angular-storybook

【解决方案1】：

也许有点太晚了，但这是我所做的。

我在项目的根目录中创建了一个 styles.scss 文件，在其中我已经导入 @import '~@angular/material/theming'; @include mat-core();

然后我将它导入到组件的scss中。

您可以跳过根目录中的 scss，1 只需将材料导入组件的 scss。

干杯！

【讨论】：