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;
  }
}

2. 去除scoped （不推薦）

<style lang='scss' scoped>
   // 往往這樣我會給這個組件定義一個獨一無二父級，避免樣式沖突
   .box{
   .el-input{
   }	
}
<style>

3. 定義全局樣式文件 （此方法推薦公共樣式管理時使用）

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