我开始开发 React 组件库，并且想重用我们与其他非 React 项目共享的一些 SCSS 代码。

为了实现这一目标，我尝试在 React 组件中使用 SASS 模块。

简单的用例工作正常，但我正在创建一个组件库，并且我需要为按钮等某些组件提供多种样式组合。

现在，我遇到了 Button 组件的问题。组件非常简单，但它有 3 个不同的 variant 值。

这是 Button.tsx 文件：

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

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

interface Props {
  children: String;
  variant: Variant;
}

export const Button: React.FC<Props> = ({ children, variant }) => {
  return <button className={`${styles.button} ${variant}`}>{children}</button>;
};

这是 Button.module.scss 文件：

.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;
  }
}

我期望的是，如果我使用像 <Buttonvariant="default">I'm green</Button> 这样的组件，会有一个绿色按钮，但我得到的是灰色按钮。

这是codesandbox上的一个实例

我被困在这个问题上，有人可以帮助我根据道具值应用不同的样式吗？