2023年6月20日发(作者：)

elementUI-form中使⽤el-select，并修改其滚动条样式最近遇到el-select需要修改它滚动条的样式，不修改全局，只对当前⽂件⽣效,但是发现直接写在scoped中不好使当使⽤element ui 的select 组件时出现不能修改组件样式的问题。当在form表单中使⽤select组件时，我们发现使⽤⽗元素包裹修改插件元素并不起作⽤，这是为什么呢，因为在form中，select组件的下拉框⽣成并不在此表单中，⽽是在与app同级的div下，这样，我们⽤⽗元素包裹写样式肯定不会⽣效，因为不在该⽗元素下⽣成的那怎么办呢？ ⼀定要污染全局环境么？其实不⽤，在select组件中，提供了⼀个popper-class属性，⽤来定义下拉框的内容（估计就是解决这种下拉框⽣成在别处的问题吧）所以我们可以给我们的select组件加上这个属性，就在这个类下修改样式啦。.roleSelect{ .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 3px; } ::-webkit-scrollbar-track{ background:#f5f7fa; } ::-webkit-scrollbar-corner{ background:#f5f7fa; }}```

2023年6月20日发(作者：)

elementUI-form中使⽤el-select，并修改其滚动条样式最近遇到el-select需要修改它滚动条的样式，不修改全局，只对当前⽂件⽣效,但是发现直接写在scoped中不好使当使⽤element ui 的select 组件时出现不能修改组件样式的问题。当在form表单中使⽤select组件时，我们发现使⽤⽗元素包裹修改插件元素并不起作⽤，这是为什么呢，因为在form中，select组件的下拉框⽣成并不在此表单中，⽽是在与app同级的div下，这样，我们⽤⽗元素包裹写样式肯定不会⽣效，因为不在该⽗元素下⽣成的那怎么办呢？ ⼀定要污染全局环境么？其实不⽤，在select组件中，提供了⼀个popper-class属性，⽤来定义下拉框的内容（估计就是解决这种下拉框⽣成在别处的问题吧）所以我们可以给我们的select组件加上这个属性，就在这个类下修改样式啦。.roleSelect{ .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 3px; } ::-webkit-scrollbar-track{ background:#f5f7fa; } ::-webkit-scrollbar-corner{ background:#f5f7fa; }}```