类名包中的类名与类名有什么区别答案

【问题标题】：what is difference between classnames vs classNames from classnames package类名包中的类名与类名有什么区别
【发布时间】：2021-12-13 05:41:48
【问题描述】：

我看到一些项目使用类名或类名将多个类应用到元素中。我想知道它们之间有什么区别，如果我在我的 typescript react 项目下应该使用哪个？从我的示例代码中看不出区别

codesandbox

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

【问题讨论】：

import iCanNameItWhateverIWant from "classnames";

标签： javascript css reactjs typescript classname

【解决方案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>
  );
}

【讨论】：