问题:
总是遇到用深度选择器也修改不了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"