时间戳

首页 > 解决方案 > 如何使用 next.js 中的 npm 类名库来选择性地应用 css 文件中的样式？

next.js - 如何使用 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 为真，我想应用 css 文件中的样式 $(styles.activeDiv) 来代替 alert-danger。换句话说，我想用 $(styles.activeDiv) 替换 alert-danger。我该怎么做呢。

标签： next.jsclass-names

解决方案

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

在此示例中，当您单击 div 时，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>
    </>
  );
}

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

推荐阅读