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

在下面的html中，我根据message.error或message.info选择应用引导类、alert danger或alert primary。目标类是引导类，它按预期工作

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

---

现在，如果message.error为true，我想应用css文件$（styles.activeDiv）中的样式来代替alert danger。换句话说，我想用$（styles.activeDiv）替换alert danger。如何做到这一点。

在Next.js和Bootstrap中，您可以覆盖默认的CSS样式或编写特定的组件级样式。实现这一点的方法有很多，可以将样式对象作为内联样式属性传递。我认为一个简单的方法就是

useState

hook。这一个在两个不同的CSS类之间切换，但您可以根据需要进行更改：

在本例中，当您单击div时，类名会更改

从“react”导入{useState}；
导出默认函数IndexPage（）{
const[dynamicClassName，setDynamicClassName]=useState（“信息”）；
常量handleClassChange=（）=>{
log（“更改div类名”）；
dynamicClassName==“信息”
？setDynamicClassName（“警报”）
：setDynamicClassName（“信息”）；
};
返回(
这个div有一个基于click的动态CSS类
{`
.警惕{
颜色：红色；
边框：5px纯红；
}
.info{
颜色：绿色；
边框：5px纯绿色；
}
`}
);
}

---

注：为更具体的工作示例而编辑

您如何选择应用。基于某些条件发出警报危险，例如消息。错误==真？@koque I使用示例更新可能不是您的确切情况，但概念相同

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>
    </>
  );
}