classnames 包中的 classnames 與 classNames 之間有什么區別

Question

我看到一些項目使用類名或類名將多個類應用到元素中。 我想知道它們之間有什么區別，如果我在我的 typescript react 項目下應該使用哪個？ 從我的示例代碼中，我看不到不同的代碼和框

// App.tsx
import "./styles.css";
import classnames from "classnames";
import classNames from "classnames";

export default function App() {
  const h1ClassName = classnames("h_classnames", { label__h1: true });
  const h2ClassName = classNames("h_classNames", { label__h2: true });
  return (
    <div className="App">
      <h1 className={h1ClassName}>I use classnames</h1>
      <h1 className={h2ClassName}>I use classNames</h1>
    </div>
  );
}

// style.css
.App {
  font-family: sans-serif;
  text-align: center;
}

.h_classnames {
  color: blue;
}

.h_classNames {
  color: red;
}

Answer 1

沒有區別，功能一樣。 classnames的默認導出是函數，您只需為它提供一個別名並導入它兩次。

例如：

import "./styles.css";
import foo from "classnames";
import bar from "classnames";

export default function App() {
  const h1ClassName = foo("h_classnames", { label__h1: true });
  const h2ClassName = bar("h_classNames", { label__h2: true });
  return (
    <div className="App">
      <h1 className={h1ClassName}>I use classnames</h1>
      <h1 className={h2ClassName}>I use classNames</h1>
    </div>
  );
}