v5 DataGrid Show column header-row divider on pinned columns-CodePudding

I'm trying to style pinned columns in MUI's DataGrid so that it shows the column header-row divider.

In MUI's official demo for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx], it shows the pinned column header without that bottom outline like this, but I want it to resemble the header-row divider of other non-pinned columns like this (Note the faint gray divider line near the bottom of the screenshot).

Any pointers to CSS classes and properties are appreciated!

EDIT: Here's a side-by-side picture of what I mean for further clarification. enter image description here

EDIT: I got it working. Please see my answer below. Any improvements or feedback is also welcome.

CodePudding user response：

I think I've fixed it, so the border for the Email section in the middle needs a height of 420 like so:

    export default function BasicColumnPinning() {
  return (
    <div style={{ height: 420, width: "100%" }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ["name"], right: ["actions"] 

} }}
          />
        </div>
      );
    }

Before the height was 400. That takes care of the header-row divider. Next for the "tables" and "action" section. The row below has a specific border-bottom property preventing the top border from showing. If you go to developer tools and inspect the padding around "Virginia Herr..." and find border-bottom and switch it to just "border". Hope this helps.

CodePudding user response：

Figured it out below by overriding borderTop property for class .MuiDataGrid-virtualScroller. Thank you for everyone's help!

export default function BasicColumnPinning() {
  return (
    <div style={{ height: 420, width: "100%" }}>
      <DataGridPro
        sx={{
          ".MuiDataGrid-virtualScroller": {
            borderTop: "1px solid rgba(224, 224, 224, 1)"
          }
        }}
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ["name"], right: ["actions"] } }}
      />
    </div>
  );
}