1.为什么出现了错乱?
- 起初,项目中的每个组件的样式使用
less
语法写的,为了避免编译后,出现样式覆盖的问题。元素的类名使用的是文件名打头 。后来,我引入了ant-desgin
UI框架。结果发现,由它带来的重置css样式,覆盖了我自己的css样式。 - 覆盖的根本原因是:我自己的css样式,是被
webpack
编译到main.css
文件中的,由link
标签引入的。而ant-desgin
带来的css样式,最终是被编译成style
样式表插到main.css
后面了,因此,导致了样式覆盖问题。
2.接下来如何解决?
- 使用
styled-component
组件库。
好处:
(1)生成的样式表,是由独一无二的类名组成的。不用担心样式覆盖的问题。
(2)通过JavaScript来为CSS赋能,我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。
(3)透传props,可以动态改变组件的样式。