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

Question

在使用CSS和Style加载器时，如何使用自己的类名？我使用React，我常常对所有类名和相关组件感到困惑。如果不建议保留班级名称，我如何以不会弄乱的方式组织我的代码？

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或Styled Components。还有this article对这些方法有很好的概述，可以帮助您做出最终决定。