Vue更改Iview、elementUI框架原始深层样式

最新推荐文章于 2025-10-08 04:54:31 发布

原创最新推荐文章于 2025-10-08 04:54:31 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css #vue.js

本文介绍了如何在Vue项目中使用LESS和SCSS来修改Iview和ElementUI这两个UI框架的深层样式。针对不同的框架提供了具体的代码示例，并对比了它们之间的差异。

Vue更改Iview、elementUI框架原始深层样式

相同点：都是通过F12拿到框架原始的类名。

不同点：

less修改iview深层样式

1.elementUI+scss样式修改与iview不同，iview+/deep/+scope，以下是iview。

<template>
  <div class="contain">
      
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
  }
};
</script>

<style lang="less" scoped>
    
    /deep/ .ivu-modal-header{
        
    }
    
</style>

SCSS 修改ElementUI 深层样式

2.以下是elementUI+scss举例

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>