有人能解释一下如何在 React 应用程序中实现样式封装吗？

Question

在查看使用React创建的网页时，我看到类名如class="pmjY9Fa_"。我了解封装的概念，但我想知道何时将可读的类名转换为唯一的字符串？查看我的应用程序（使用基本的create-react-app创建）时，类名仍然是正常的。我是否需要安装像css-modules这样的npm包？如果我这么做了，会发生什么？比如，我必须弹出我的CRA以将css-modules添加到我的webpack配置中，这样当应用程序构建（无论是开发还是生产）时，样式名称就会被散列化？此外，如果所有样式名称都被散列化，这不是一个糟糕的开发体验吗？

我的问题是，如何设置样式封装，并使用散列类名，并且仍然具有良好的开发体验与人类可读的类名？

编辑：此外，我正在尝试找出如何在不使用Styled Components的情况下完成此操作，因为我要处理的项目已经将scss与JSX文件共存。

- OctaviaLo

---

请查看此链接：https://medium.com/@hammadtariq65/style-encapsulation-in-reactjs-ba4e3212a9f - Kevin M. Mansour

使用CSS模块或StyledComponents - T J

如其他评论所建议的那样，我推荐使用Styled Components库。它非常出色：https://github.com/styled-components/styled-components - Flagship1442

我即将要处理的项目已经使用 SCSS 与 JSX 文件并列。你应该使用 CSS 模块化。它非常简单：只需要重命名文件（例如 myButton.module.scss），导入（import styles from "./myButton.module.scss"）和使用（<div className={styles.someClass}>...</div>）。 - Ajeet Shah

Answer 1

CSS模块

create-react-app v2+

自带支持CSS模块。

您不需要

• 弹出,
• 手动执行任何其他webpack配置，或
• 执行npm安装

使用create-react-app（v2+）的CSS模块非常容易

1. 将与组件名称相关联的css文件命名为[name].module.css
2. 像import styles from './[Name].module.css'一样将CSS类添加到此文件中，并将其导入到React组件中
3. 像<header className={styles.header}>…</header>一样使用类

当应用程序运行时，呈现的DOM中的类名将自动mangled以防止全局冲突。例如，运行时名称将是[name]_header__1RvjY，而不仅仅是header。

这里有一个链接，更详细地解释了这个问题。这是create-react-app CSS模块文档的链接。

第二个选择是样式组件这是官方文档，可以帮助你入门。两种方法同样简单，只是取决于个人偏好。

因此，总之，无论你选择哪种方法，都不需要担心全局冲突，并且具有很好的开发者体验。

- Subha