我開始開發 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上的一個實例
我被困在這個問題上,有人可以幫我根據道具值套用不同的樣式嗎?