React组件库中Sass模块实现Button多样式变体失效问题求助

你遇到的核心问题是Sass Modules的局部作用域特性：所有在.module.scss文件里定义的类名，都会被编译成带唯一哈希后缀的类名（比如.button变成Button_button_abc123，.default变成Button_default_xyz456）。但你在组件里直接把variant的值（比如default）作为类名，实际渲染的是原始字符串default，和SCSS编译后的带哈希类名不匹配，所以变体样式根本没生效，按钮只会显示基础的灰色。

根据你需要和非React项目共享SCSS的需求，有两种可行方案：

方案1：正确引用Sass模块中的变体类名 #

直接通过styles对象获取编译后的变体类名，因为styles里存储了所有SCSS类名对应的哈希版本：

import React from "react";
import styles from "./Button.module.scss";

type Variant = "default" | "primary" | "tertiary";

interface Props {
  children: string; // 注意这里用小写string，不是String构造函数
  variant: Variant;
}

export const Button: React.FC<Props> = ({ children, variant }) => {
  // 用styles[variant]获取编译后的变体类名
  return <button className={`${styles.button} ${styles[variant]}`}>{children}</button>;
};

同时在SCSS里补全tertiary的变体样式：

.button {
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  background-color: grey;
  color: white;

  &.default {
    background-color: green;
  }
  &.primary {
    background-color: red;
  }
  // 补全tertiary样式
  &.tertiary {
    background-color: blue;
  }
}

这个方案保持了Sass Modules的局部作用域，适合纯React组件库场景，不会和其他样式冲突。

方案2：使用全局类名兼容非React项目 #

如果你需要让这些变体类名能直接被非React项目复用，可以用Sass的:global()语法包裹变体类，让它们跳过哈希编译：

.button {
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  background-color: grey;
  color: white;

  // 用:global()包裹变体类，使其成为全局类名
  :global(&.default) {
    background-color: green;
  }
  :global(&.primary) {
    background-color: red;
  }
  :global(&.tertiary) {
    background-color: blue;
  }
}

这样组件里原来的写法${styles.button} ${variant}就能正常工作了——styles.button是带哈希的局部类名，而variant对应的default/primary是全局类名，和SCSS里的定义完全匹配，同时非React项目也能直接使用这些全局类名。

注意你的Props里children的类型应该是小写的string（TypeScript的原始类型），而不是String（构造函数类型），后者很少在React组件中使用。

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