Veo algún proyecto que usa nombres de clase o nombres de clase para aplicar múltiples clases en el elemento. Me pregunto cuál es la diferencia entre ellos y cuál debería usar si estoy en mi proyecto de reacción mecanografiado. De mi código de ejemplo, no puedo ver la diferencia
// 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; }No hay diferencia, es la misma función. La exportación predeterminada de nombres de classnames es la función, solo le proporciona un alias y la importa dos veces.
Por ejemplo:
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> ); }