Angular+StoryBook场景下ngClass及静态类不生效问题求助

1. 导入CommonModule启用ngClass指令 #

你的组件采用standalone模式，但未导入CommonModule——[ngClass]这类内置指令属于该模块，这是导致绑定失效的核心原因。修改组件代码：

@Component({
  selector: 'lib-button',
  standalone: true,
  imports: [CommonModule], // 新增该行导入
  templateUrl: './button.component.html',
  styleUrl: './button.component.css'
})
export class ButtonComponent {
  @Input() primary: boolean = false;
  @Input() label: string = 'Click';
}

2. 关联primary输入属性动态绑定样式类 #

当前HTML静态绑定'Primary'未利用组件的primary输入参数，调整HTML代码实现动态类绑定：

<button [ngClass]="{'Primary': primary}">{{label}}</button>

若仅需静态测试样式，可直接使用原生class属性：

<button class="Primary">{{label}}</button>

3. 验证类名匹配一致性 #

确保CSS类名与绑定的类名大小写完全一致（你当前使用的.Primary首字母大写，需保持匹配），避免因大小写差异导致样式无法命中。

你的Primary故事已传递primary: true参数，完成上述修改后，样式即可正常生效。

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