修改elementUi自带组件样式不生效问题及解决

问题:

总是遇到用深度选择器也修改不了elemenUi自带样式的问题。
以为是原生的bug。然后我再一次遇到了,在使用el-select时,修改el-select-dropdown的样式不生效。

原因分析

后来审查元素时发现渲染后的dom元素压根儿就不在#app元素内部。原来是el-select里面的el-select-dropdown元素渲染后会脱离#app。所以使用深度选择器也无法定位该元素。

解决

发现问题根源后,换了一种搜索的方式,之前都是搜elementUi组件样式不生效问题,没有找到合适的解决方法,现在搜el-select组件样式修改。bingo,终于找到对症下药的博文,完美解决!方法如下:
在el-select 上增加一个属性:popper-append-to-body="false",这个属性用于将渲染后的元素放入#app元素。
再使用深度选择器修改就可以了。
参考博文:https://blog.csdn.net/qq_44747461/article/details/106140453

总结

类似不起作用都可看看是否是上述原因,再选择合适的关键词搜索解决方法。


后记1:以上为el-select的样式的修改方式,有时遇到其他组件样式不生效问题,分析并解决如下,即可完美处理: