如何使用 next.js 中的 npm 类名库来选择性地应用 css 文件中的样式？

Question

在下面的 html 中，我有选择地应用 bootstrap 类、alert-danger 或 alert-primary，具体取决于 message.error 或 message.info .目标类是 bootstrap 类并且它按预期工作。

<div
   className={classnames(`alert, ${styles.alertDiv}`, {
   "alert-danger": message.error,
   "alert-primary": message.info,
   })}
  >

现在，代替警报危险，我想应用 css 文件中的样式，$(styles.activeDiv) 如果 message.error 为真。换句话说，我想用 $(styles.activeDiv) 替换 alert-danger。我该怎么做。

Answer 1

在 Next.js 和 Bootstrap 中，您可以覆盖默认 CSS 样式或编写特定的组件级别样式 Next.js Built-in CSS Support。有很多方法可以实现这一点，您可以将样式对象作为内联样式属性传入。我认为一个简单的方法就是 useState 挂钩。这个在两个不同的 CSS 类之间切换，但您可以根据自己的需要进行更改：

在此示例中，当您单击 div

时，类名会发生变化

codesandbox example of Dynamic ClassName

import { useState } from "react";

export default function IndexPage() {
  const [dynamicClassName, setDynamicClassName] = useState("info");
  
  const handleClassChange = () => {
    console.log("changing div class name");
    dynamicClassName === "info"
      ? setDynamicClassName("alert")
      : setDynamicClassName("info");
  };

  return (
    <>
      <div className={dynamicClassName} onClick={handleClassChange}>
        This div has a dynamic CSS class based on click
      </div>

      <style jsx>
        {`
          .alert {
            color: red;
            border: 5px solid red;
          }

          .info {
            color: green;
            border: 5px solid green;
          }
        `}
      </style>
    </>
  );
}

注意：针对更具体的工作示例进行了编辑

如何使用 next.js 中的 npm 类名库来选择性地应用 css 文件中的样式？

How do I use the npm classnames library in next.js to optionally apply styles from a css file?

class-names

next.js