import Head from "next/head";
import Button from "../components/Button";
export default function Home() {
return (
<div className="main_content">
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Button
onClick={() => console.log("You Clicked Me!")}
type="button"
buttonStyle="btn__primary__solid"
buttonSize="btn__large"
>
Buy Now
</Button>
<Button
onClick={() => console.log("You Clicked Me!")}
type="button"
buttonStyle="btn__warning__solid"
buttonSize="btn__large"
>
Buy Now
</Button>
<Button
onClick={() => console.log("You Clicked Me!")}
type="button"
buttonStyle="btn__danger__solid"
buttonSize="btn__large"
>
Buy Now
</Button>
</div>
);
}@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
:root {
--primary: #4628ff;
--warning: #ffd129;
--danger: #eb3f27;
--success: #75fa83;
--white: #fdfdfd;
--dark: #181717;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
.main_content {
max-width: 1299px;
min-height: 100vh;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
}
.btn {
font-family: "Roboto", sans-serif;
font-weight: 400;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.btn:hover {
transform: translateY(-3px);
}
/* colors & styles */
.btn__primary__solid {
background-color: var(--primary);
color: var(--white);
border: none;
}
.btn__warning__solid {
background-color: var(--warning);
color: var(--dark);
border: none;
}
.btn__danger__solid {
background-color: var(--danger);
color: var(--white);
border: none;
}
.btn__success__solid {
background-color: var(--success);
color: var(--white);
border: none;
}
.btn__primary__outline {
background-color: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn__warning__outline {
background-color: transparent;
border: 2px solid var(--warning);
color: var(--warning);
}
.btn__danger__outline {
background-color: transparent;
border: 2px solid var(--danger);
color: var(--danger);
}
.btn__danger__outline:hover {
background-color: var(--danger);
border: 2px solid var(--danger);
color: var(--white);
}
.btn__success__outline {
background-color: transparent;
border: 2px solid var(--success);
color: var(--success);
}
.btn__success__outline:hover {
background-color: var(--success);
border: 2px solid var(--success);
color: var(--white);
}
/* sizes */
.btn__medium {
padding: 10px 20px;
font-size: 18px;
}
.btn__large {
padding: 15px 30px;
font-size: 20px;
}const STYLES = [
"btn__primary__solid",
"btn__warning__solid",
"btn__danger__solid",
"btn__success__solid",
"btn__primary__outline",
"btn__warning__outline",
"btn__danger__outline",
"btn__success__outline",
];
const SIZES = ["btn__medium", "btn__large"];
function Button({ children, type, onClick, buttonStyle, buttonSize }) {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
: STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
return (
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
>
{children}
</button>
);
}
export default Button;This code works great with the globals.css file :-) But I want to convert this to css module.That's exactly that line of code:
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
How to change, convert this className to css module className ?? My solution is like this :
className={`${styles.btn} ${styles.checkButtonStyle} ${styles.checkButtonSize}`}
Regrettably, my proposed solution did not work:/ Can anyone provide assistance? Thank you in advance!