element ui如何全局修改Table组件表头背景色？

Question

我尝试过用下面的方法，在main.js里设置props默认值，但失败了，没有效果。

ElementUI.Table.props.headerCellStyle.default = () => {
  return {
    backgroundColor: 'red'
  }
}

参考的这篇文章：https://juejin.cn/post/6911590652568403975

除了CSS全局样式，还有别的方法吗？

Answer 1

研究了下Element UI的源码，发现Table.props.headerCellStyle的写法稍微有点不一样，没有指定default，所以改写下就好啦。
https://github.com/ElemeFE/element/blob/f14b5ba5406b0f682499663fc5d6fb10864b3146/packages/table/src/table.vue#L294

// main.js
import ElementUI from 'element-ui';
ElementUI.Table.props.headerCellStyle = {
  type: [Object, Function],
  default: () => {
    return {
      backgroundColor: 'red'
    }
  }
}
Vue.use(ElementUI);

Answer 2

这个是messageBox

这个是Dialog

这个是table

可以看见这个大概是不能这样的

我的项目是在是在全局CSS做的覆盖:
先写样式

在去除单元格样式:

引入样式覆盖

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

CSS覆盖不是来的更快