react项目css样式错乱，带来的思考

1.为什么出现了错乱？

• 起初，项目中的每个组件的样式使用less语法写的，为了避免编译后，出现样式覆盖的问题。元素的类名使用的是文件名打头 。后来，我引入了ant-desginUI框架。结果发现，由它带来的重置css样式，覆盖了我自己的css样式。
• 覆盖的根本原因是：我自己的css样式，是被webpack编译到main.css文件中的，由link标签引入的。而ant-desgin带来的css样式，最终是被编译成style样式表插到main.css后面了，因此，导致了样式覆盖问题。

2.接下来如何解决？

• 使用styled-component组件库。
• 好处：
  （1）生成的样式表，是由独一无二的类名组成的。不用担心样式覆盖的问题。
  （2）通过JavaScript来为CSS赋能，我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。
  （3）透传props，可以动态改变组件的样式。