Ag Grid v28.2.1：如何覆盖单元格内边距为0px并填满单元格

问题原因 #

1. 主题变量配置错误：你在ag.grid-styles中使用了--ag-cell-horizontal-padding，但该SCSS混合宏接受的是不带--前缀的参数名，内部会自动转换为对应的CSS变量，所以之前的配置未生效。
2. 样式优先级不足：直接设置.ag-cell { padding: 0; }会被Ag Grid默认主题的样式覆盖，因为默认主题的选择器优先级更高。

解决方案 #

方案一：正确配置主题变量（推荐）

在ag.grid-styles的配置对象中，使用不带--的参数名设置单元格水平内边距：

@use "~ag-grid-community/styles" as ag;

@include ag.grid-styles((
    theme: xxx,
    extend-theme: balham,
    cell-horizontal-padding: 0px, // 正确的参数名，无需加--
));

.ag-theme-xxx {
  .ag-cell-wrapper {
    width: 100%;
    height: 100%;
  }

  .ag-cell-value {
    width: 100%;
    height: 100%;
  }
}

方案二：提升样式选择器权重

如果主题变量配置仍不生效，通过叠加选择器提升优先级，避免滥用!important（若必须使用则控制范围最小化）：

@use "~ag-grid-community/styles" as ag;

@include ag.grid-styles((
    theme: xxx,
    extend-theme: balham,
));

.ag-theme-xxx {
  // 叠加选择器提升优先级
  .ag-cell.ag-cell {
    padding: 0;
  }

  .ag-cell-wrapper {
    width: 100%;
    height: 100%;
  }

  .ag-cell-value {
    width: 100%;
    height: 100%;
  }
}

额外优化：确保自定义CellRenderer填满单元格

为了让你的黄色div完全填满单元格，可在样式中给.ag-cell-wrapper添加display: flex，确保子元素能继承尺寸：

.ag-theme-xxx {
  .ag-cell-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }
}

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams