Element 自定义主题样式

### 如何自定义 Element UI Tooltip 样式 #### 使用全局样式覆盖默认样式 为了改变 `el-tooltip` 的默认外观，可以在项目的全局样式文件中添加 CSS 或 SCSS 规则来覆盖默认设置。对于希望影响整个应用程序中的所有工具提示的情况，这种方法非常有效。 ```css /* 轻量级主题 */ .el-tooltip__popper.is-light { background: #FFF; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.16); border-radius: 4px; opacity: 1; border: none; } .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after { border-top-color: #fff; } .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { border-top-color: rgba(0,0,0,0.16); }[^2] ``` #### 针对特定实例应用样式 当只需要针对某个具体的 `el-tooltip` 实例定制样式时，在模板里给这个组件加上唯一的类名或ID，并在不带 scoped 属性的 `<style>` 块内编写相应的CSS规则即可实现局部样式的调整。 ```html <!-- HTML --> <template> <div id="app"> <!-- 添加唯一class名称 --> <el-tooltip class="custom-tooltip" effect="dark" content="这是我的自定义tooltip!" placement="right"> <button>悬停查看</button> </el-tooltip> </div> </template> <style> .custom-tooltip.popover-class .el-tooltip__popper { /* 定义自己的背景颜色 */ background-color: red !important; } </style>[^3] ``` #### Vue单文件组件内的作用域样式处理 如果正在开发的是Vue单文件组件(SFC)，而想要保持样式的作用范围仅限于当前组件，则可以利用`:global()`伪类选择器或者移除 `<style>`标签上的 `scoped`属性来进行操作。 ```scss // 移除scoped并使用更具体的选择器 <style lang="scss"> #myComponent .el-tooltip__popper { font-size: 1rem; color: blue; } </style> ```