我开始开发 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上的一个实例
我被困在这个问题上,有人可以帮助我根据道具值应用不同的样式吗?
请使用
classnames
npm 库。雷雷