关于vue element-ui 样式问题

element-ui 全局自定义样式

main.js里

// element-ui 这里是一般的引入方式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 添加自己的样式库，
import './assets/css/element-ui/index.css'

index.css里面可以这样写

.el-button {
  height:30px;
  padding: 5px 20px;
}

vue控件修改样式时，如果多个页面的样式不统一，直接在页面写样式
 

.el-input__inner{
  height: 74px !important;
  background-color: rgba(140, 142, 189, 0.6)!important;
  color: #fff !important;
  margin-bottom: 20px;
}

这里加了!important，有些地方不加并不起作用

style没有scoped

会导致其它页面样式也会受影响

这时候最好是这样写

#appid .el-input__inner{
  height: 74px !important;
  background-color: rgba(140, 142, 189, 0.6)!important;
  color: #fff !important;
  margin-bottom: 20px;
}

这样这个样式就只作用在当前appid下了