搜尋

首頁  >  問答  >  主體

React元件庫 + SASS模組化

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

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

P粉818306280P粉818306280231 天前370

全部回覆(2)我來回復

  • P粉504080992

    P粉5040809922024-03-27 20:07:46

    請使用 classnames npm 函式庫。

    import cn from 'classnames';
    
    

    回覆
    0
  • P粉244155277

    P粉2441552772024-03-27 19:59:53

    雷雷

    回覆
    0
  • 取消回覆