亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

我開始開發(fā) React 組件庫，并且想重用我們與其他非 React 項(xiàng)目共享的一些 SCSS 代碼。

為了實(shí)現(xiàn)這一目標(biāo)，我嘗試在 React 組件中使用 SASS 模塊。

簡單的用例工作正常，但我正在創(chuàng)建一個(gè)組件庫，并且我需要為按鈕等某些組件提供多種樣式組合。

現(xiàn)在，我遇到了 Button 組件的問題。組件非常簡單，但它有 3 個(gè)不同的 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> 這樣的組件，會(huì)有一個(gè)綠色按鈕，但我得到的是灰色按鈕。

這是codesandbox上的一個(gè)實(shí)例

我被困在這個(gè)問題上，有人可以幫助我根據(jù)道具值應(yīng)用不同的樣式嗎？