我開始開發 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上的一個實例

我被困在這個問題上，有人可以幫我根據道具值套用不同的樣式嗎？