Next.js Css 带变量的类名。如何把change/convert改成css模块类名？

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;

此代码与 globals.css 文件配合使用效果很好 :-) 但我想将其转换为 css module.That 正是那行代码：

className={`btn ${checkButtonStyle} ${checkButtonSize}`}

如何更改，将此类名转换为css模块类名？？我的解决方案是这样的：

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

但不幸的是它不起作用:/ 会有人这么伟大和帮助吗？致以最诚挚的问候和感谢！

Answer 1

我决定添加此代码以服务其他遇到相同问题的人。如果我们在 *.module.css 文件中保留相同的 class 名称，那么解决方案如下所示：

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

成功之父是@juliomalves。谢谢@juliomalves，没有你会很难。

Answer 2

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

Next.js Css 带变量的类名。如何把change/convert改成css模块类名？

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

javascript

css

reactjs

css-modules

next.js