[vue3+element-plus]带状态的表格css样式，element plus修改css样式无效

文章 > [vue3+element-plus]带状态的表格css样式，element plus修改css样式无效

10:53 2022/06/02 3383

[vue3+element-plus]带状态的表格css样式，element plus修改css样式无效

根据官方文档来看的话，是在渲染数据的时候给表格行增加css属性
```javascript
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
```
css属性
```javascript
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
```
然鹅我是用的phpstorm这个编辑器，他生成vue组件的时候会自动帮助填充一些内容，而style标签里面会多一个`scoped`属性，百度了一下：**在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。但是同时，scoped也会阻碍我们修改第三方组件库（element plus）的样式。**
然后给出的解决办法是
```javascript
.el-table /deep/ .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
```
这样就能显示样式了，然而我在打包的时候提示这个已经弃用了
![](https://skapi-1253927675.cos.ap-guangzhou.myqcloud.com/blog/202206/8e675cf6fde0ce4c7fac3415471dda07.png)
再次百度一下，
```javascript
.el-table :deep(.danger-row) {
  --el-table-tr-bg-color: var(--el-color-danger-light-7);
}
```
用这样的写法后打包就不会提示了