关于vue与react，引用第三方ui组件，如element antd，的样式穿透问题

首先为什么要样式穿透呢，因为改样式改不到

那么为什么会改不到呢，

vue中如果你加了scoped，就改不到，因为vue帮你样式模块化了，你可以看到你写的那些元素身上都会有 data[asdfasdfasfd4654]一堆hash一样的东西

就是用来样式模块化的，所以你无法透过他们选到里面的element的ui组件的类名，改样式

当然，如果去掉scoped就行了，但是这样样式模块化就没了，容易样式类名冲突

那么怎么办呢

怎么在有scoped样式模块化的情况下，改到element组件的样式呢

用穿透

如 /deep/  或者 >>> 或者::v-deep（v-deep这个是vue提供的）,

 

而react不需要穿透，直接就能改到，因为没有vue一样的scoped这样的模块化

所以容易有样式冲突

比如a组件  #a .title{color:red;} 

b组件  #b .title{color:red;} 

然后再a组件里引用b组件

那么title样式会冲突，想想就知道了

因为a包含了b，那么a下的所有样式都会被影响到。

title会影响到b，因为b的.title确实是在#a下，元素上已经包含了

 

vue的模块化通过scoped

react是如何做样式模块化的呢

css文件名字加module，然后引入，之后通过点出来类名，就不会有冲突了，