国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我開始開發(fā) React 元件庫(kù)，並且想重複使用我們與其他非 React 專案共享的一些 SCSS 程式碼。

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

簡(jiǎn)單的用例工作正常，但我正在建立一個(gè)元件庫(kù)，我需要為按鈕等某些元件提供多種樣式組合。

現(xiàn)在，我遇到了 Button 元件的問題。元件非常簡(jiǎn)單，但它有 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ù)道具值套用不同的樣式嗎？