通过 CSS variables 来定义的 table的样式
BaseTableCSSVariables 参考
https://ali-react-table.js.org/docs/table/api/#css-%E5%8F%98%E9%87%8F%E5%88%97%E8%A1%A8

style样式变量参考
https://github.com/alibaba/ali-react-table/blob/master/packages/website/src/assets/AntdBaseTable.tsx

  1. const style = {
  2.   '--line-height': 1.5715,
  3.   '--font-size': '12px',
  4.   '--row-height': '32px',
  5.   '--header-row-height': '36px',
  6.   '--cell-padding': '8px',
  7.   '--lock-shadow': '10px 0 8px -8px rgba(0, 0, 0, 0.2)',
  8.   '--border-color': '#f0f0f0',
  9.   // '--bgcolor': '#fff',
  10.   '--bgcolor': 'inherit', // transparent 用 tr的颜色，选中当前行
  11.   '--header-bgcolor': '#dceefe', // 'rgba(205,229,253, 0.45)',
  12.   '--color': 'rgba(0, 0, 0, 0.65)', // td文字颜色
  13.   '--header-color': 'rgba(0, 0, 0, 0.85)', // th 文字颜色
  14.   // '--hover-bgcolor': '#fafafa',
  15.   '--hover-bgcolor': '#fafcff', // 'rgba(205,229,253, 0.1)', // hover时 tr的颜色
  16.   // '--header-hover-bgcolor': 'rgba(205,229,253, 0.3)' = #f5fafe
  17.   '--header-hover-bgcolor': '#f5fafe',
  18.   '--header-highlight-bgcolor': '#f5fafe',
  19.   '--highlight-bgcolor': '#f5fafe',
  20. };
  23. import styles from './style.module.less';
  25. function App() {
  26.   // 选中高亮的当前行
  27.   const [currentIndex, setCurrentIndex] = useState(null);
  29.   function getRowProps(record, rowIndex) {
  30.     return {
  31.       style:
  32.         rowIndex === currentIndex
  33.           ? { '--bgcolor': '#eff5fe', '--hover-bgcolor': '#eff5fe' }
  34.           : { '--bgcolor': '#fff' },
  35.       onClick() {
  36.         setCurrentIndex(rowIndex);
  37.       },
  38.     };
  39.   }
  41.   return (
  42.     <BaseTable
  43.       {...pipeline.getProps()}
  44.       getRowProps={getRowProps}
  45.       style={style}
  46.       // style={{ '--color': '#333', '--cell-border': 'none' }}
  47.       className={`${styles.table} bordered`}
  48.     />
  49.   )
  50. }

image.png

css variables

BaseTable主题参考 https://ali-react-table.js.org/docs/table/theming/
支持的自定义 CSS 变量如下

  1. export type BaseTableCSSVariables = Partial<{
  2.   /** 表格一行的高度，注意该属性将被作为 CSS variable，不能使用数字作为简写 */
  3.   '--row-height': string
  4.   /** 表格的字体颜色 */
  5.   '--color': string
  6.   /** 表格背景颜色 */
  7.   '--bgcolor': string
  8.   /** 鼠标悬停时的背景色 */
  9.   '--hover-bgcolor': string
  10.   /** 单元格高亮时的背景色 */
  11.   '--highlight-bgcolor': string
  13.   /** 表头中一行的高度，注意该属性将被作为 CSS variable，不能使用数字作为简写 */
  14.   '--header-row-height': string
  15.   /** 表头中的字体颜色 */
  16.   '--header-color': string
  17.   /** 表头的背景色 */
  18.   '--header-bgcolor': string
  19.   /** 表头上鼠标悬停时的背景色 */
  20.   '--header-hover-bgcolor': string
  21.   /** 表头上单元格高亮时的背景色 */
  22.   '--header-highlight-bgcolor': string
  24.   /** 单元格 padding */
  25.   '--cell-padding': string
  26.   /** 字体大小 */
  27.   '--font-size': string
  28.   /** 表格内字体的行高 */
  29.   '--line-height': string
  30.   /** 锁列阴影，默认为 rgba(152, 152, 152, 0.5) 0 0 6px 2px */
  31.   '--lock-shadow': string
  33.   /** 单元格的边框颜色 */
  34.   '--border-color': string
  35.   /** 单元格边框，默认为 1px solid var(--border-color) */
  36.   '--cell-border': string
  37.   /** 单元格上下边框，默认为 var(--cell-border) */
  38.   '--cell-border-horizontal': string
  39.   /** 单元格左右边框，默认为 var(--cell-border) */
  40.   '--cell-border-vertical': string
  41.   /** 表头单元格边框，默认为 1px solid var(--border-color) */
  42.   '--header-cell-border': string
  43.   /** 表头单元格上下边框，默认为 var(--header-cell-border) */
  44.   '--header-cell-border-horizontal': string
  45.   /** 表头单元格左右边框，默认为 var(--header-cell-border) */
  46.   '--header-cell-border-vertical': string
  47. }>

getCell设置单元格样式

精细的场景下，可以使用 getCellProps 来定制每个单元格的样式

getRowProps 当前行高亮

通过 getRowProps(…) 设置 tr 元素上的 props，例如 className, style, onClick
https://ali-react-table.js.org/docs/table/examples/#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%A8%E6%A0%BC%E8%A1%8C%E6%A0%B7%E5%BC%8F

  1. functionApp() {
  2.   function getRowProps(record, rowIndex) {
  3.     console.log('record', currentIndex, rowIndex);
  4.     return {
  5.       style:
  6.         rowIndex === currentIndex
  7.           ? { '--bgcolor': '#eff5fe', '--hover-bgcolor': '#eff5fe' }
  8.           : { '--bgcolor': '#fff' },
  9.       onClick() {
  10.         setCurrentIndex(rowIndex);
  11.       },
  12.     };
  13.   }
  15.   return (
  16.     <BaseTable
  17.       getRowProps={getRowProps}
  18.       className={`${styles.table} bordered`}
  19.       />
  20.   )
  21. }