React项目中Bootstrap的全局样式污染

在写GuGu_Simple_Upload项目时，发现了自己的a标签样式与Ant官网上的展示效果不一样…

官网上的样式：

我的样式：

赶紧打开浏览器控制台查看是哪里的CSS代码作用的，一看，好家伙，代码来自bootstrap…

这个bootstrap是在…我想起来了…

因为我觉得自己的设计水平可提升的程度不要太高，而且也对CSS不熟练，要是自己写个登录页面肯定又累又丑…

还不如去网上找个模板好看的，copy过来改改就完事…

网上的登录模板是用了bootstrap，被我copy过来的登录页面在前端目录是这样的：

我直接使用import "./bootstrap.min.css";来引入bootstrap

我知道项目是单页面应用，通过替换一个指定的标签内容来展示。前端工程编译生成的HTML代码是如何引入CSS样式的呢？观察了HTML代码发现就是直接在head标签上插入了style标签，内容就是bootstrap.min.css的内容…

那我使用的ant组件样式呢？看了HTML发现也同样用style标签插入，而且还在bootstrap样式的上方…

既然这样，那我就可以利用CSS的优先级来解决问题，可以用link载入bootstrap标签，也可以前端代码中先于导入ant样式前导入bootstrap样式，我不用考虑重写页面，也不用考虑样式分离，OK问题解决。