故事书中未出现的角度材质样式

Question

我正在尝试在应用程序中使用 Angular Material 库创建故事书nx，但我无法显示该库附带的样式。因此组件会呈现，但没有随之而来的样式。我已将组件添加到 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.jsonaproject.json和 a 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",

任何帮助深表感谢！

Answer 1

你的内心project.json应该有一个storybook目标。这就是您需要添加样式的地方。

build只影响构建目标。

例如

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

Answer 2

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

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

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

您可以跳过根目录中的 scss，然后将材料导入到组件的 scss 中。

干杯!