解决element ui无法修改height和padding

最新推荐文章于 2025-03-17 09:56:40 发布

内师-ZT

最新推荐文章于 2025-03-17 09:56:40 发布

阅读量3.8k

点赞数 5

分类专栏： vue 文章标签： vue.js css elementui

本文链接：https://blog.csdn.net/drhnb/article/details/131756901

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

当使用ElementUI的el-header组件并尝试通过style修改height和padding时，可能遇到样式不生效的问题。解决方法包括直接在el-header标签内添加行内样式来修改height，以及在style标签上添加scoped属性来确保padding修改只对当前组件生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我使用element ui的布局容器组件时，想要修改height和padding，发现无法使用style样式不起作用
可以尝试用以下方法解决：
1、修改height，直接在el-header标签的行内修改

例如：我们引入一个el-header,将它的高度设置为100px

<template>
  <el-container>
  <el-header>
  </el-header>
</el-container>
</template>

<style>
.el-header{
  height: 100px;  //设置高度
  background-color: #11f455;
}
</style>

发现并没有变化
在这里插入图片描述
解决：直接在el-header标签的行内修改height

 <el-container>
  <el-header height="100px">  //行内修改高度
  </el-header>
</el-container>
</template>

<style>
.el-header{
  background-color: #11f455;
}
</style>

在这里插入图片描述

2、修改padding,给style标签加上scoped

例如：我们引入一个el-header,将它padding都设置为0

<template>
  <el-container>
  <el-header>
  </el-header>
</el-container>
</template>

</script>

<style>
.el-header{
  padding: 0 0; //修改padding
  background-color: #11f455;
}
</style>

发现并没有变化
在这里插入图片描述
解决：在style标签上加上scoped

<template>
  <el-container>
  <el-header>
  </el-header>
</el-container>
</template>

</script>

<style scoped>  //添加scoped
.el-header{
  padding: 0 0;
  background-color: #11f455;
}
</style>

在这里插入图片描述