Fluent UI DataGrid内嵌Dropdown无法调尺寸且溢出列求助

我参考Fluent UI DataGrid官方文档创建了DataGrid，并在onRenderCell中嵌入Dropdown组件，代码如下：

onRender: () => {
  return (
    <Dropdown
      style={{ width: 10 }}
      onChange={(data) => {
        console.log(data);
      }}
    >
      {dropdownOptions.map((option) => (
        <Option key={option}>{option}</Option>
      ))}
    </Dropdown>
  );
}

尝试设置width:10及overflowX属性均无效果，Dropdown仍溢出至相邻列，请问如何解决该问题？

• 固定DataGrid对应列的宽度
  DataGrid的单元格默认没有严格的宽度约束，仅给Dropdown设置宽度无法限制其溢出。需要在列定义时明确设置该列的宽度范围：

  const columns = [
    // 其他列配置
    {
      key: 'dropdownColumn',
      name: '操作列',
      width: 120, // 按需设置合适宽度
      minWidth: 120,
      maxWidth: 120,
      onRender: () => { /* Dropdown渲染逻辑 */ }
    }
  ];
  

• 用容器包裹Dropdown并约束宽度
  在Dropdown外层添加一个容器，设置width: 100%和overflow: hidden，让Dropdown继承容器宽度，同时容器被单元格的宽度限制：

  onRender: () => {
    return (
      <div style={{ width: '100%', overflow: 'hidden' }}>
        <Dropdown
          style={{ width: '100%' }}
          onChange={(data) => {
            console.log(data);
          }}
        >
          {dropdownOptions.map((option) => (
            <Option key={option}>{option}</Option>
          ))}
        </Dropdown>
      </div>
    );
  }
  

• 覆盖Dropdown的默认最小宽度样式
  Fluent UI的Dropdown组件自带默认最小宽度，可能导致设置的width不生效，需要通过styles属性覆盖：

  <Dropdown
    styles={{
      dropdown: { minWidth: 'unset', width: '100%' },
      title: { minWidth: 'unset', width: '100%' }
    }}
    onChange={(data) => {
      console.log(data);
    }}
  >
    {dropdownOptions.map((option) => (
      <Option key={option}>{option}</Option>
    ))}
  </Dropdown>
  

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