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

Question

我是react.Js的新手，通常是用vue.js或vanilla (pure HTML, CSS, JS)做造型。关于ClassName在React中的最佳实践，我有一些疑问。当在ReactJs中提供className时，我想问一下最佳实践(如果您给出使用其中一种样式时的优势和劣势等原因，将会很有帮助)。

让我们说一下，我在React.Js中有一个页面，scoped和global中有一些css文件。下面是我在React.Js中进行样式化或在那里声明类时使用的一些技巧：

1. className={styles.scopedCSS} -->我在这个示例import styles from './mycode.css'

中使用了限定范围的样式

1. className="Global-CSS" ->我使用的是全局css文件，比如说app.css

通常有这两种技术，但是当您在您的项目中使用更复杂和自定义的CSS样式时，比如结合global和scoped CSS时，我的好奇之处在于。这是我目前发现的技术：

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

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

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

1. style={marginLeft: 0, display: 'flex', etc.} ->在我的代码

中直接使用full Styles inline

关于这方面的信息，我真的很好奇，因为我发现这是一个非常有趣的话题，对于我来说，这篇文章并不多，我认为解释这些差异是有用的，而且我进行了相当深入的讨论，因为上面的技术之一只会使您的代码看起来像意大利面条代码，当您的项目变得越来越大时。

我希望有人能帮助我解释这个问题，因为我真的很想了解这个造型技术问题的反应。

Answer 1

为了动态地实现className，我建议使用npm包classnames https://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。情绪和样式-组件是一些替代，如果您感兴趣的css- in -js，这是相当流行的反应样式。