Vue项目解决自定义el-dialog的border-radius无效的问题

一、问题产生的原因
 

  自定义el-dialog的border-radius无效的原因其实就是因为层级的问题,

f12打开样式检查就能发现组件自身已经全局定义了一个圆角变量

二、解决方法
 

和上面一样,在项目全局也就是在app.vue中定义全局变量 并且需要给!important,不加!important是无效的,要不然覆盖不了原有的.

<style lang="scss" scoped>
.el-dialog {
  border-radius: var(--el-border-radius-small);
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
<template>
  <RouterView></RouterView>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<style lang="scss">

@import './global.scss';
</style>
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

.global.scss

:root {
  --el-border-radius-small: 10px !important;
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

改别的其实也一样,在全局定义就行,总之就是要覆盖掉原有的。其实不在全局加也行,把scoped去掉就行(但是这个不推荐!!!)  亲测有用!!!!!


三、效果如下:

相关推荐

  1. 解决el-radio-group只触发一次问题

    2024-04-29 06:50:02       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-29 06:50:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-29 06:50:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-29 06:50:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-29 06:50:02       20 阅读

热门阅读

  1. Redis分布式锁学习

    2024-04-29 06:50:02       12 阅读
  2. 什么是ar.exe?

    2024-04-29 06:50:02       11 阅读
  3. C语言内存函数及模拟实现

    2024-04-29 06:50:02       11 阅读
  4. HTML5(2)

    HTML5(2)

    2024-04-29 06:50:02      10 阅读
  5. halcon中find_shape_model算子的应用攻略

    2024-04-29 06:50:02       11 阅读
  6. 【LLM】动手部署个人知识库助手

    2024-04-29 06:50:02       13 阅读
  7. React中,双花括号和单花括号的区别

    2024-04-29 06:50:02       12 阅读