如何消除Fluent UI DetailsList左侧空白，使其从左侧开始显示？

我使用Fluent UI DetailsList实现了列表UI，当前列表左侧存在大量空白区域，希望调整为内容从容器左侧对齐显示的效果。以下是几种可行的解决方法：

方法1：启用紧凑模式 #

通过添加compact属性，减少组件默认的内边距和间距：

<DetailsList
  items={yourItems}
  columns={yourColumns}
  compact={true}
/>

方法2：自定义样式移除内边距 #

利用styles属性覆盖列表容器的默认样式，直接清除左侧内边距：

const customStyles = {
  root: { paddingLeft: 0 },
  contentWrapper: { paddingLeft: 0 }
};

<DetailsList
  items={yourItems}
  columns={yourColumns}
  styles={customStyles}
/>

方法3：检查列配置 #

如果列定义中存在隐藏列、过宽的minWidth或width设置，也会导致左侧空白。排查并调整列参数：

const columns = [
  { key: 'col1', name: '列1', fieldName: 'field1', minWidth: 100, width: 150 },
  // 其他列配置...
];

方法4：禁用选择功能（若无需选择） #

如果不需要列表项选择功能，设置selectionMode为none，移除左侧选择框的占位空白：

import { SelectionMode } from '@fluentui/react';

<DetailsList
  items={yourItems}
  columns={yourColumns}
  selectionMode={SelectionMode.none}
/>

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