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

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

|--------------|-------------------|
| popper-class | DatePicker 下拉框的类名 |

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

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

html 复制代码
<!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>

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

css 复制代码
    .el-popper[x-placement^=top] .popper__arrow::after{
      border-top-color: #243B53; 
      bottom: 0px;
    }
相关推荐
红尘散仙2 小时前
谁说终端只能敲键盘?我用 Rust 给小说阅读器加上了鼠标
前端·后端·rust
Penge6662 小时前
《Go 后端开发者学 React:组件通信与插槽》
javascript
陈随易3 小时前
C++26 草案被否,二十八年来头一回
前端·后端·程序员
ZhengEnCi4 小时前
Agent 工具怎么折叠海量输出才「爽」:Trae、Claude Code 的渐进式披露设计原理
前端·agent
Penge6664 小时前
《Go 后端开发者学 React:useState》
javascript
Penge6664 小时前
《Go 后端开发者学 React:数据渲染》
javascript
IT_陈寒7 小时前
Redis内存暴涨,没想到是AOF重写捣的鬼
前端·人工智能·后端
ikoala7 小时前
让 Codex 自己查账:一个省 token 的小技巧
前端·后端·ai编程
ikoala7 小时前
AI 写页面像说明书,修 Bug 像贴膏药?把这两句话写进 AGENTS.md
前端·javascript·ai编程
Penge6667 小时前
《Go 后端开发者学 TypeScript:ES Module了解》
javascript