I'm currently in the process of developing a React components library and I am looking to incorporate some shared SCSS code from other non-react projects.
In order to achieve this, I am exploring the use of SASS modules within my react component.
While the basic use case is functioning well, I am facing a challenge with the Button component. The component itself is straightforward, but it requires multiple style variations for certain components like buttons.
The issue lies specifically with the Button component. It's a simple component with 3 different variant values.
Below is the content of 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>;
};
And here is the content of 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;
}
}
My expectation is to have a green button when using the component as
<Button variant="default">I'm green</Button>You can view a live example on codesandbox
I am currently stuck on this issue and would appreciate any assistance on applying different styles based on prop values.