Angular Storybook中自定义Material主题不生效的原因排查

1. SCSS变量引用错误（核心问题） #

你在定义$hv-landing-page-primary和$hv-landing-page-accent时，错误使用了theme.$primary-palette和theme.$secondary-palette作为参数，但你的SCSS代码里并未定义theme命名空间，导致mat.define-palette无法识别自定义调色板，Material组件自然无法应用主题样式。

修复代码： #

将变量引用前的theme.前缀移除：

$hv-landing-page-primary: mat.define-palette(
  $primary-palette,
  600,
  300,
  900
);

$hv-landing-page-accent: mat.define-palette(
  $secondary-palette,
  600,
  300,
  900
);

2. 调色板权重映射逻辑错误（可选优化） #

当前调色板定义中，数值越小的权重对应颜色越深（如300对应$primary-default），这和Material默认的权重逻辑（数值越大颜色越深）相反，会导致color="primary"的按钮显示浅色，可能不符合预期。若需要默认primary为深色，建议调整映射：

$primary-palette: (
  300: $primary-light,
  600: $primary-default,
  900: $primary-dark,
  contrast: (
    300: "#fff",
    600: "#fff",
    900: "#fff"
  )
);

$secondary-palette: (
  300: $secondary-light,
  600: $secondary-default,
  900: $secondary-dark,
  contrast: (
    300: "#fff",
    600: "#fff",
    900: "#fff"
  )
);

3. 导入方式优化（可选） #

虽然测试样式有效，但Angular项目中更标准的主题引入方式是在angular.json的styles数组中配置，而非在preview.ts中用loader链导入，能确保样式在组件渲染前加载完成：

// angular.json
{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/theme.scss",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者PKHDK