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

Question

Seems pretty basic, but the documentation is scant .

Creating a module override CSS, I have tried to customize line-height for one of my tables so that text does not double-space when text wrapping.

Here is the 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);
  }

Here is a sample of my module, 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>
)

The result? Line-height remains the default (may be hard to see, but there is a second line of text below the first):

I have also attempted several variations on the below:

• .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'; }
• Adding !important to the end of the line, eg .ag-theme-alpine.ag-cell { line-height: 20;important; } .ag-theme-alpine.ag-cell { line-height: 20;important; }

Note that the variable name was found in the console, as it does not appear in the list of variable names found in the documentation . Maybe this is the problem, but I have yet to see a variable that meets the criteria.

Answer 1

Resolved this in a bit of an unexpected way. Adding the below to the global style sheet overrode the default:

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

Note that I had to change the class being referenced, paring it back to .ag-cell only. Not sure why exactly, but this was the only thing that worked.