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

Posted 2023-03-09

参考技术A 总是遇到用深度选择器也修改不了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的样式的修改方式，有时遇到其他组件样式不生效问题，分析并解决如下，即可完美处理：
将<style lang="scss" scope>中的scope去掉，此时变为全局的样式，为了确保其他单页面中相应元素的样式不会随之改变，需要用当前的父级定位该元素，即在其父级上添加一个class，在修改对应的子元素样式，并且再刷新浏览器（重要！），才能生效。（作为修改样式的首选）
（不推荐使用/deep/深度选择器，因为只适用于chrome浏览器，存在浏览器兼容问题）
后记2：修改el-dropdown样式方法：
在el-dropdown-menu 上加类名，再在<style lang="scss" >下添加样式。因为与el-select的原因一样，渲染后都不在app元素下，所以加一个父元素并不会定位到。注意此时为全局样式，避免修改其他单页面的样式
后记3：修改el-date-picker样式：
增加popper-class 设置新的样式如：popper-class="date-style"