Pustaka komponen bertindak balas + modulariti SASS

Question

Saya mula membangunkan perpustakaan komponen React dan ingin menggunakan semula beberapa kod SCSS yang kami kongsi dengan projek bukan React yang lain.

Untuk mencapai matlamat ini, saya cuba menggunakan modul SASS dalam komponen React.

Kes penggunaan mudah berfungsi dengan baik tetapi saya sedang mencipta pustaka komponen dan saya memerlukan berbilang kombinasi gaya untuk komponen tertentu seperti butang.

Kini, saya menemui nilai Button 组件的问题。组件非常简单，但它有 3 个不同的 variant.

Ini ialah Button.tsx fail:

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>;
};

Ini ialah Button.module.scss fail:

.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;
  }
}

Apa yang saya jangkakan ialah jika saya menggunakan komponen seperti <Buttonvariant="default">I'm green</Button> akan ada butang hijau, tetapi apa yang saya dapat ialah butang kelabu.

Ini adalah contoh pada codesandbox

Saya terperangkap dalam isu ini, bolehkah sesiapa membantu saya menggunakan gaya berbeza berdasarkan nilai prop?

Answer 1

Sila gunakan classnames pustaka npm.

import cn from 'classnames';

Answer 2