解决element ui无法修改height和padding

当我使用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> 

发现并没有变化
解决element ui无法修改height和padding_第1张图片
解决:直接在el-header标签的行内修改height

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

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

解决element ui无法修改height和padding_第2张图片

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>

发现并没有变化
解决element ui无法修改height和padding_第3张图片
解决:在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> 

解决element ui无法修改height和padding_第4张图片

你可能感兴趣的:(vue,vue.js,css,elementui)