Next.js Css className with Variables. How to change/convert into css module className?

Question

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

but unfortunately it doesn't work:/ Will someone be so great and help? Best regards and Thank You in advanced!

If you're keeping the same class names in your *.module.css file then styles.checkButtonStyle and styles.checkButtonSize do not exist. You need to reference existing class names when accessing styles, e.g. styles['btn__primary__solid']. — juliomalves
– juliomalves, Commented Oct 5, 2021 at 17:28
Okay ! Thanks A lot For Your Tip :-) I appreciate it very much ! @juliomalves Best Regards! — MarioG8
– MarioG8, Commented Oct 5, 2021 at 17:56

MarioG8 · Accepted Answer · 2021-10-06 09:46:34Z

1

I decided to add this code to serve other people who encounter the same problem. If we're keeping the same class names in our *.module.css file then the solution looks like this:

className={`${styles.btn} ${styles[checkButtonStyle]} ${styles[checkButtonSize]}`}

The father of success is @juliomalves. Thank You @juliomalves, it would be hard without you.

edited Oct 6, 2021 at 9:46

answered Oct 6, 2021 at 9:04

MarioG8

6,1014 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vijaykumar Mahendran · Accepted Answer · 2022-03-12 08:52:38Z

0

className={[ styles[btn], styles[checkButton--Style], styles[check__ButtonSize] ]}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

please use array your write CSS BEM-block element modifier method

answered Mar 12, 2022 at 8:52

vijaykumar Mahendran

523 bronze badges

Collectives™ on Stack Overflow

Next.js Css className with Variables. How to change/convert into css module className?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related