element ui el-select 中el-popper 组件样式穿透不生效

1.使用::deep深度修改标签样式 找到需要修改的 ElementUI 标签的类名，然后在类名前加上 ::deep，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。 <style lang="scss" scoped> ::v-deep .el-select__popper.el-popper { background: rgba(42, 43, 60, 0.5); border: 1px rgba(103, 179, 229, 1) so.

在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用 ::v-deep ‘>>>’ /deep/ 行内Style 这四种样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style 首先给它添加一个特定的类名 , 千万别重复 , 语义命名以免样式污染 popper-class="down-popover"

1、存在修改默认样式不生效问题的展示： A、问题一：虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示： B、问题二：渲染后的 dom 元素并不在 #app 元素内部： // 发现：修改下拉框默认属性而渲染的 dom 元素是与 #app 并列位于 body 中的，因此是没有办法通过深度选择器来定位该元素的； 2、用(深度)选择器设置属性不生效的原因： A、原因一：select-popper 元素渲染后会脱离 #app; 发现渲染后的 dom 元素不在 #app 元素内部, 应该是 el-selec

popper-append-to-body： 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false。开发时在使用动态tab增加行时添加的下拉框、时间框增加该属性后弹出框看不到了，分析发现是因为行高度不够导致内容自动隐藏。解决方法是重新编写css。

当你没有设置这个属性时，el-select是跟app是同级的，所以样式不生效。1. 在el-select里面加个类名 我这里叫park-select。2.在style里面写穿透 注意：我这里是设置下拉菜单的样式的哈 所以。当当当 最后效果图就是这样啦 小伙伴们 注意类名别选择错啦。然后下拉菜单的输入框样式是在全局css中设置的。如果加了这句还不生效 那咱们就需要。由于我还需要设置鼠标经过时高亮。是不是不管怎么设置样式都不生效呢。小伙伴们可以看下官方文档这一条。

我在一个项目之中需要修el-select的下拉框，但是修改过程之中无论是通过 穿透，还是加!improtant都无法修改其下拉框的样式，查询之后得知不生效的原因可能是select的下拉框渲染过后不在#app上，需要用官方文档上面的popper-append-to-body修改将popper-append-to-body设置为false之后，是可以修改的。

element-ui中下拉框样式修改

默认样式如下 .el-select-dropdown__item.selected { color: #409EFF; font-weight: 700; } 加上/deep/后发现样式未生效 /deep/ .el-select-dropdown__item.selected { color: #red; font-weight: 700; } 解决方法：添加popper-append-to-body属性设置为false，不把弹出框插入至 body 元素 <el-selec

修改element-ui select的样式 <el-select v-if="options.length > 0" @change="handleSelectKeyChange" :value="searchKey" slot="prepend" style="width:110px" placeholder="请选择" :popper-append-to-body="false" popper-class="select-popper"> <e

【问题】： 在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。

修改el-select样式时，发现 /deep/ .class名{background:#00f !important;}不生效的问题...

popper-append-to-body是一个Popper.js库的选项，用于指定Popper元素是否应该附加到文档的body元素上。通过Element-ui的Select Attributes可发现，有这样一个属性 popper-append-to-body。在使用el-select的时候，其样式会按照Elementui自带的默认样式为基准；.el-select-dropdown__item:hover——hover时的样式。.el-select-dropdown__item——单个选项的样式修改。

首先在el-select上定义 popper-class="eloption" 和 :popper-append-to-body="true"，使用方法如下面代码段。样式的话一定要注意不要加scoped，（这么写也不会影响其他页面的）

原因控制台看到下拉项的`DOM`元素时插入到`body`里面了，使用`:popper-append-to-body="false"`发现已经废弃，最后发现替换成`:teleported="false"`

el-popover 自定义class不生效问题去掉默认的样式

穿透都不起作用， 这是因为el-popper生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style。在使用element-plus 的el-popper 组件时，会发现自己对el-popper写的样式不起作用，甚至连使用。然后在当前文件样式中 不加scoped写一份。

框架：Vue+Element 问题： 当点击select，弹出popper后，再滚动外层容器区域，popper的scroll监听会不停的变动popper的位置。这是正常现象。 但是，由于我们的DOM结构嵌套太多，布局太复杂。出现了一个特别的现象： popper没有正常的跟随select的位置变化定位。 如果发生这种情况，比较好处理的是直接可以加一下select 的 popper-append-to-body 属性 并设置为false值（whether to append the popper menu t

vue3中更改el-select下拉框样式的方法。

1. 为什么要添加append-to-body属性 在写弹框嵌套时我们需要添加append-to-body属性，否则后弹出的框就会有遮盖层遮挡，如下图 2.为什么会修改无效 我们想改变某个弹窗的原来样式，通常是在该弹框外包一个div，然后修改该div下的dialog样式，但是添加append-to-body属性为true后，Dialog 将插入 body 元素上，也就是说它并不在该div元素之下了，因此修改无效。 3.添加了append-to-body属性的dialog样式修改方式 在dilog组件上定义c