vue中Element-ui样式修改

下拉框（el-dropdown）

// hover 下拉框的hover效果
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    background: $bgmColor !important;
    transition: background 1.9s;
}

面包屑的字体（el-breadcrumb）

.home .el-breadcrumb__inner a,
.home .el-breadcrumb__inner.is-link {
    color: $fontColor;
    font-weight: normal;
}

表格样式（el-table）

.el-table {
  margin-top: 20px;
  height: 684px;
  // 标题行样式修改
  thead th {
    height: 38px;
    background: $tablesColor;
    transition: background 2s;
  }
  // 奇数行背景修改
  tbody tr {
    height: 38PX;
    background: $tablesColor;
    color: $fontColor;
    transition: background 2s;
  }
  // 偶数行背景修改
  tbody .el-table__row--striped td {
    height: 38px;
    background: $tableColor !important;
    transition: background 2s;
  }
}

输入框 （el-input）

// 输入框
.el-input__inner {
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  background: $inputColor;
  transition: background 2s;
  // input提示框字体样式修改
  ::placeholder {
    font-size: 18px;
    font-weight: 400;
    color: $fontColor;
  }
}

element-ui 修改注意点

当无法修改时，可以尝试一下几种方法

1. /deep/

	// 输入框
/deep/ .el-input__inner {
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  background: $inputColor;
  transition: background 2s;
  ::placeholder {
    font-size: 18px;
    font-weight: 400;
    color: $fontColor;
  }
}

1. 去除scoped （不推荐）

<style lang='scss' scoped>
   // 往往这样我会给这个组件定义一个独一无二父级，避免样式冲突
   .box{
   .el-input{
   }
}
<style>

1. 定义全局样式文件 （此方法推荐公共样式管理时使用）

// 在main.js中引入此文件
import './styles/publiStyle.scss'