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

根据官方文档来看的话，是在渲染数据的时候给表格行增加css属性

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

css属性

<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）的样式。 然后给出的解决办法是

.el-table /deep/ .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

这样就能显示样式了，然而我在打包的时候提示这个已经弃用了 再次百度一下，

.el-table :deep(.danger-row) {
  --el-table-tr-bg-color: var(--el-color-danger-light-7);
}

用这样的写法后打包就不会提示了