使用react data grid时点击后单元格宽度异常增大问题

• 样式导入缺失
  沙箱环境会默认补全组件依赖样式，本地项目需要手动导入官方基础样式，在组件/入口文件顶部添加引入代码：
  import 'react-data-grid/lib/styles.css';
• 全局样式冲突
  本地项目的全局CSS如果对table、td、div等通用标签设置了box-sizing、padding、border等属性，会覆盖组件默认样式导致宽度计算异常。可以通过父类选择器隔离样式：

  /* 给你的RDG容器加自定义类名rdg-wrap */
  .rdg-wrap .rdg-cell {
    box-sizing: border-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  

• 编辑态样式适配问题
  点击单元格进入编辑状态时，默认编辑输入框未限制宽度会撑大单元格，添加如下样式修复：

  .rdg-cell .rdg-editor-container,
  .rdg-cell .rdg-editor-container input {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
    border: none;
    outline: none;
  }
  

• 版本不一致问题
  核对本地安装的react-data-grid版本和沙箱运行的版本一致，部分历史版本存在列宽计算的已知bug，可以升级到最新稳定版修复。
• 自定义单元格适配问题
  如果使用了自定义单元格渲染组件，给自定义组件外层添加max-width: 100%、overflow: hidden属性，避免内容撑宽单元格。

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