使用React修改@atlaskit/dynamic-table表头字体大小失效如何解决

你在单元格配置中传入的fontSize不属于@atlaskit/dynamic-table官方支持的配置项，组件不会识别该参数并渲染对应的样式，可通过以下三种方式修改字体大小：

• 方案1：自定义content渲染节点
  把单元格的content字段从字符串改为带内联样式的React节点，仅需调整你现有的单元格配置即可：

  {
    key: 'pluginName',
    content: <span style={{fontSize: '30px'}}>Plugin Name</span>,
    shouldTruncate: true,
    isSortable: true,
    width: withWidth ? 25 : undefined,
  }
  

  该方案适合仅需修改特定单元格字体的场景，内容行的单元格也可以用相同逻辑配置。
• 方案2：用组件内置props统一设置
  DynamicTable提供了headCellProps和cellProps参数，可以批量给所有表头、内容单元格注入样式，无需调整单个单元格配置：

  <DynamicTable
    head={createHead(true)}
    rows={你的表格行数据}
    caption={caption}
    headCellProps={{
      style: { fontSize: '30px' }
    }}
    cellProps={{
      style: { fontSize: '30px' }
    }}
  />
  

  该方案符合组件设计规范，适合需要全局修改整个表格字体大小的场景。
• 方案3：CSS样式覆盖
  可以通过组件自带的属性选择器直接覆盖样式：

  /* 表头单元格 */
  [data-ds--table--head-cell] {
    font-size: 30px;
  }
  /* 内容单元格 */
  [data-ds--table--cell] {
    font-size: 30px;
  }
  

  如果样式优先级不足不生效，可以加!important提升优先级，非必要场景不推荐大量使用!important

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