使用className风格的技巧时反应的最佳实践

Question

我是react.Js的新手，通常我在vue.js或vanilla (pure HTML, CSS, JS)中进行造型。我对React中的ClassName最佳实践有一些疑问。我想问一下在ReactJs中给出className时的最佳实践(如果你能给我一些理由，比如在使用其中一种风格时的优点和缺点，那会很有帮助(。

假设我在React.Js中有一个页面，在scoped和global中有一些css文件。这里有一些我在React.Js中进行样式设计或在其中放置我的类时使用的技巧：

1. className={styles.scopedCSS}->我在这个例子中使用了作用域样式import styles from './mycode.css'

2. className="Global-CSS"->我正在使用全局css文件，比如app.css

通常有这两种技术，但当你在项目中使用更复杂的自定义CSS样式时，比如结合global和scopedCSS时，我的好奇心就来了。这就是我目前发现的技术：

1. className={`Global-CSS Global-CSS ${styles.ScopedCSS} ${styles.ScopedCSS}`}

2. className={`Global-CSS Global-CSS ${styles.['scoped-css', 'scoped-css']}`}

3. className={Style.constStylingName}->为此，我使用Const constStylingName = `Global-CSS Global-CSS ${styles['scoped-css', 'scoped-css']}来编写我的完整CSS行，所以我只使用一行来定义我的ClassName。如果你想在这里添加一些逻辑，你也可以使用terniary operation。

4. style={marginLeft: 0, display: 'flex', etc.}->直接在我的代码中使用full Styles inline

关于信息，我真的很好奇，因为我觉得这是一个很有趣的话题，没有太多的文章我觉得解释差异对我有用，我进行了相当多的讨论，因为当你的项目规模越来越大时，上面的一种技术只会让你的代码看起来像意大利面条代码。

我希望有人能帮我向我解释这个问题，因为我真的很想在react中了解这个造型技术问题。

Answer 1

要动态实现className，我建议使用一个npm包classnameshttps://www.npmjs.com/package/classnames.

例如，您可以这样使用它(对于条件类来说非常方便(：

import cn from classnames;
className={cn('text-bold', 'font-xl')}
className={cn('text-bold', {'font-xl': userInput === 'xl'})}

如果您使用的是作用域css，最好签出css模块，而不是普通的css。如果你对js中的css感兴趣，情感和样式组件是一些替代方案，这在React样式中非常流行。