elementUI改样式失败问题DatePicker-日期选择器
目录
elementUI改样式失败问题——DatePicker 日期选择器
今天做一个vue2的项目时，发现使用deep对时间选择器的选择控件不生效，因为elementUI官方文档里写了：
| popper-class | DatePicker 下拉框的类名 |
并且通过浏览器可以发现，选择控件是直接挂在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;
}