解决element ui无法修改height和padding_el-header设置高度

当我使用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> 
1
2
3
4
5
6
7
8
9
10
11
12
13

发现并没有变化

解决：直接在el-header标签的行内修改height

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

<style>
.el-header{
  background-color: #11f455;
}
</style> 
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

发现并没有变化

解决：在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> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15