使用 CSS 加载器保留类名或在 React 中组织代码？

Question

如何在使用 CSS 和样式加载器时使用我自己的 class 名称？我正在使用 React，我经常对所有 class 名称和相关组件感到困惑。如果不建议保留 class 名称，我该如何组织我的代码才不会变得混乱？

Answer 1

您可以使用普通 classNames，然后导入具有类样式的相关 .css 文件。像这样：

MyComponent.js

...
import '/path/to/css/style.css'
...
render() {
  return(<div className="MyComponent">Hello</div>);
}
...

style.css

...
.MyComponent {
  width: 100px;
  background-color: red;
  ...
}
...

虽然您负责命名您的类并确保没有冲突并且所有内容都正确命名（然后您可以按照 BEM 技术或其他技术作为你喜欢）。

另外还有其他方法我就不详细解释了，因为相关文档很好，不需要任何补充。

您可以使用 Css Modules or Styled Components. There is also this article，它对这些方法有很好的概述，可以帮助您做出最终决定。

Keep classnames with CSS loader or organize code in React?