element如何修改原样式及无法修改原样式等问题

x33g5p2x  于2022-04-28 转载在 其他  
字(1.1k)|赞(0)|评价(0)|浏览(670)

1.使用::deep深度修改标签样式
找到需要修改的 ElementUI 标签的类名,然后在类名前加上 ::deep,可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。

  1. <style lang="scss" scoped>
  2. ::v-deep .el-select__popper.el-popper {
  3. background: rgba(42, 43, 60, 0.5);
  4. border: 1px rgba(103, 179, 229, 1) solid;
  5. }
  6. <style/>

2.去除scoped
在需要更改的组件里新增一个style标签【重点:不要加scoped】,然后直接获取class设置样式就可以咯,class自己去浏览器里右键审查元素可得到。
建议:在获取到的样式里加上能限制范围的父层选择器,不然就变成全局样式咯。

  1. .home .el-select__popper.el-popper {
  2. background: rgba(42, 43, 60, 0.5);
  3. border: 1px rgba(103, 179, 229, 1) solid;
  4. }

3.修改全局的话就去全局样式设置即可 

但是你会发现有些样式还是无法修改,这是我遇到的问题:

Select选择器下拉框样式无法修改

一、问题描述

最近做的项目需要用到element的select,我想改成透明背景色,通过查找dom修改样式,但无论怎么修改都始终覆盖不了原来的样式。

二、分析原因

通过仔细查看Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级id为app的div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。

三、解决问题

在Select选择器上,添加:popper-append-to-body="false",就可以修改了

  1. <el-form-item label="能源类型">
  2. <el-select
  3. v-model="form.energy"
  4. placeholder="电能"
  5. :popper-append-to-body="false" //添加
  6. >
  7. <el-option
  8. v-for="item in energyList"
  9. :key="item.label"
  10. :label="item.label"
  11. :value="item.value"
  12. />
  13. </el-select>
  14. </el-form-item>

DatePicker日期选择器样式无法修改 

问题跟上面的选择器一样加如下属性即可 :

相关文章