ag-grid自定义CSS样式失效：行高(line-height)设置不生效求助

问题背景 #

想自定义AG Grid表格的line-height，避免文本换行时出现双倍间距，但官方相关文档内容匮乏。尝试通过模块CSS覆盖样式，但设置后line-height仍为默认值，文本下方仍有多余行的空白。

已尝试的代码 #

1. Test.module.css 中的样式 #

.ag-theme-alpine .ag-cell, .ag-theme-alpine .ag-full-width-row .ag-cell-wrapper.ag-row-group {
    line-height: min(var(--ag-line-height,20px),20px);
}

2. Test.tsx 中的组件代码 #

import './Test.module.css'
// ...其他代码
return (
    <div className="ag-theme-alpine" style={{ height: '105px', width: screenWidth }}>
        <AgGridReact 
            rowData={testData} 
            columnDefs={testCols} 
            headerHeight={hiddenHeader} 
            getRowHeight={getRowHeight} 
            rowStyle={{width: screenWidth}} 
        ></AgGridReact>
    </div>
)

其他尝试的写法 #

• .ag-theme-alpine .ag-cell { line-height: min(var(--ag-line-height,20px),20px); }
• .ag-theme-alpine .ag-cell { line-height: 20; }
• .ag-theme-alpine .ag-cell { --ag-line-height: '20px'; }
• 添加!important强制生效：.ag-theme-alpine .ag-cell { line-height: 20 !important; }

注意点 #

从控制台找到的--ag-line-height变量并未出现在官方自定义变量文档中，这可能是问题根源，但暂未找到符合需求的官方变量。

解决方案 #

1. 提升CSS选择器优先级
   AG Grid的内置样式优先级较高，模块CSS的类名会被添加哈希后缀，导致.ag-theme-alpine .ag-cell这种选择器无法匹配到实际元素。可以改用全局CSS文件，或者在模块CSS中使用:global()包裹目标选择器：

:global(.ag-theme-alpine .ag-cell), :global(.ag-theme-alpine .ag-full-width-row .ag-cell-wrapper.ag-row-group) {
    line-height: 20px;
}

2. 直接覆盖行高变量（如果可用）
   如果控制台能看到--ag-line-height变量，尝试在全局作用域下定义该变量，而不是在单元格选择器内：

:global(.ag-theme-alpine) {
    --ag-line-height: 20px;
}

这样所有依赖该变量的元素都会继承这个值，避免逐个选择器覆盖。

3. 检查行高计算逻辑
   你设置了getRowHeight函数，确保该函数返回的行高值和你设置的line-height匹配，避免行高过大导致视觉上的“双倍间距”。比如如果行高设为40px，即使line-height是20px，单元格内也会有多余空白。

4. 使用AG Grid官方的样式自定义方式
   如果上述方法无效，尝试通过gridOptions中的getCellStyle函数动态设置样式：

<AgGridReact
    // ...其他配置
    getCellStyle={() => ({ lineHeight: '20px' })}
></AgGridReact>

这种方式直接作用于单元格，优先级更高，不会被模块CSS的作用域限制影响。

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