欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 八卦 > elementUI改样式失败问题——DatePicker 日期选择器

elementUI改样式失败问题——DatePicker 日期选择器

2025/3/12 17:02:13 来源:https://blog.csdn.net/m0_59873661/article/details/146156461  浏览:    关键词:elementUI改样式失败问题——DatePicker 日期选择器

今天做一个vue2的项目时,发现使用deep对时间选择器的选择控件不生效,因为elementUI官方文档里写了:

popper-classDatePicker 下拉框的类名

并且通过浏览器可以发现,选择控件是直接挂在body下的,所以解决方法是直接找到body的样式,在里面修改。

以本次项目为例,在index.html的style里直接添加选择器的样式。

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8" />...</head><body><div id="app"></div></body>
</html>
<style>body {// 其他样式// ...// elementUi时间选择器样式.el-picker-panel__sidebar, .el-picker-panel {background: #243b53;border: none;color: #fff;border-radius: 8px;}}
</style>

还有一个小问题,时间选择框的小箭头的样式,可以通过以下代码更改:

    .el-popper[x-placement^=top] .popper__arrow::after{border-top-color: #243B53; bottom: 0px;}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词