react如何修改第三方UI组件样式

Posted 2023-05-06

参考技术A   为了快速开发，我们做项目时经常引用第三方的UI组件库，如Zent、Ant Design等。

  有时候，引用第三方组件的样式与我们自己写的组件的样式差异很大，我们需要修改第三方组件的默认样式。

  上面的方式是可以修改第三方组件的样式的，但有一个隐患，因为外面的标识名字是我们起的，它是全局的，是有可能与其他处的className冲突的，最好的方式是写成局部的样式，就像是vue中的/deep/ ，我想利用css Module的方式，生成一个不重复的className，

  但是，在编译时，却把我写的局部的css给筛除掉了，应该是编译工具做了tree shakeing导致的。

  这也是现在困扰我的一个问题，react如何设置才能像vue 的/deep/那样局部修改组件的css样式？

Vue中修改组件库(如element ui)样式的可行方案

参考技术A

vue中我们经常会使用一些第三方的组件库，可以达到快速搭建项目界面布局的效果，无非就是用什么组件库的问题。
但是，不管我们使用element ui、vuetify或是别的什么组件库，修改样式是必不可少的一个工作。
针对公司自己的风格或是ui的设计，组件库默认的样式、配色等并不一定符合所有人的要求，那么修改组件库的样式就成了必不可少的一部分。
就拿 element ui 组件举例，这里描述几种经测试有效的解决方案：

好了，以上就是博主针对修改组件库样式总结的一些可行方案，希望对你有帮助。
如有问题，请指出，接受批评。