如何修改Inovua React Data Grid单元格内数据的默认字体大小

以下是几种经过验证的可行方案，可根据你的实际需求选择：

1. 全局CSS样式覆盖 #

这是最简便的全量修改方案，直接覆盖组件内置类名的样式即可：

/* 适配所有Inovua React Data Grid的单元格 */
.InovuaReactDataGrid__cell {
  font-size: 12px !important;
}

/* 仅修改指定表格的样式，给表格外层容器添加自定义类名custom-grid即可 */
.custom-grid .InovuaReactDataGrid__cell {
  font-size: 12px;
}

如果需要同时修改表头字体，额外添加样式即可：

.InovuaReactDataGrid__header__cell {
  font-size: 12px;
}

2. 单列针对性配置样式 #

如果只需要调整部分列的字体大小，可以直接在列配置项中使用组件原生支持的cellStyle属性，无需额外写全局样式：

const columns = [
  {
    name: 'description',
    header: '描述',
    // 固定设置该列所有单元格字体大小
    cellStyle: { fontSize: '12px' }
  },
  {
    name: 'title',
    header: '标题',
    // 支持动态设置不同行的样式
    cellStyle: ({ data }) => {
      return {
        fontSize: data.isHighlight ? '13px' : '12px'
      }
    }
  }
]

3. 自定义单元格渲染 #

如果需要对单元格内容做更多自定义控制，可以通过render属性自定义内容结构，直接给内容元素设置字号：

const columns = [
  {
    name: 'longText',
    header: '长文本内容',
    render: ({ value }) => {
      return <span style={{ fontSize: '12px', lineHeight: 1.2 }}>{value}</span>
    }
  }
]

4. 主题全局配置 #

如果项目中所有表格都需要统一调整字号，可以直接通过主题参数配置：

import { DataGrid } from '@inovua/reactdatagrid-community';

const customTheme = {
  // 全局设置表格基础字体大小
  fontSize: '12px',
  // 配套调整行高适配小字体，避免布局留白过多
  rowHeight: 32,
  headerHeight: 36
}

const AppGrid = () => {
  return <DataGrid theme={customTheme} columns={columns} dataSource={data} />
}

注意：调整字体大小后建议同步调整行高、内边距等相关参数，让表格整体布局更紧凑，最大化利用有限空间。

内容的提问来源于stack exchange，提问作者tprebenda