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

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 組件的問題。組件非常簡(jiǎn)單，但它有 3 個(gè)不同的 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?