定制的 CSS 样式不适用于 ag-grid

Question

看起来很基本，但文档很少。

创建一个模块覆盖 CSS，我尝试为我的一个表自定义行高，以便在文本换行时文本不会双倍空格。

这是 CSS， 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);
  }

这是我的模块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>
)

结果？ Line-height 仍然是默认值（可能很难看到，但在第一行下方有第二行文本）：

我还尝试了以下几种变体：

• .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-theme-alpine.ag-cell { line-height: 20;important; }

请注意，变量名称是在控制台中找到的，因为它没有出现在文档中找到的变量名称列表中。 也许这就是问题所在，但我还没有看到符合标准的变量。

Answer 1

以一种意想不到的方式解决了这个问题。 将以下内容添加到全局样式表会覆盖默认值：

.ag-cell {
  line-height: min(var(--ag-line-height,15px),15px) !important;
}

请注意，我必须更改被引用的 class，仅将其还原为.ag-cell 。 不知道为什么，但这是唯一有效的方法。