vue2.0中使用element框架修改样式不生效问题

vue中的css有全局CSS和组件作用域的CSS，当我们引入element ui时，发现组件作用域的CSS进行修改element样式出现不生效的问题，例如table组件中row-class-name属性修改样式，下面说一下解决此问题的几种方式：
1、修改为全局样式

//去掉scoped
<style>
.el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

2、全局及组件作用于CSS混用

<style scoped>
...
</style>
<style>
.el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

页面引入全局css

//引入一个全局的css文件
<style scoped>
@import "../../assets/css/common.css";
...
</style>

页面引入全局scss

//安装sass和sass-loader，webpack打包需要使用sass-loader
//npm i sass sass-loader --save-dev 
//组件style需要增加lang属性
<style lang="scss" scoped>
@import "../../assets/scss/common.scss";
...
</style>

3、深度修改样式

CSS

<style scoped>
//方法一
/deep/ .el-table .warning-row {
    background: oldlace;
}
//方法二，page_bar为外层类名，是否为直接父级均可
.page_bar >>> .el-table .warning-row {
    background: oldlace;
}
</style>

SCSS

<style lang="scss" scoped>
::v-deep .el-table{
   .warning-row {
	    background: oldlace;
	}
	.success-row {
	    background: #f0f9eb;
	  }	
}
</style>

PS：也可全局引入css样式，全局引入在main.js文件中引入

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/scss/common.scss'