How to word-wrap the column from material-ui DataGrid?

i'm trying to word wrap my column header title of DataGrid from material-ui, but with no luck.

I've tried to use sx, style, but It doesn't work. Tried this too:

const StyledDataGridtwo = styled(DataGrid)<DataGridProps>(({ theme }) => ({
root: {
    '& .MuiDataGrid-columnHeaderTitle': {
        wordWrap: 'break-word'
    }
}}))
<StyledDataGridtwo rows={rows} columns={columns} />

But it doesn't work. I want to make something like excel does. There's any way to do this?

The main property that needs to be overridden is the white-space CSS property (rather than the word-wrap property). However line-height also needs to be adjusted, otherwise it wraps in a very ugly way (56px per line of text). If you have the potential for your headers to wrap to more than 3 lines, then you also need to override some height CSS for the headers.

Here's a working example:

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";

const rows = [
  {
    id: 1,
    username: "@MUI",
    age: 20
  }
];

export default function HeaderColumnsGrid() {
  return (
    <div style={{ height: 250, width: "100%" }}>
      <DataGrid
        sx={{
          "& .MuiDataGrid-columnHeaderTitle": {
            whiteSpace: "normal",
            lineHeight: "normal"
          },
          "& .MuiDataGrid-columnHeader": {
            // Forced to use important since overriding inline styles
            height: "unset !important"
          },
          "& .MuiDataGrid-columnHeaders": {
            // Forced to use important since overriding inline styles
            maxHeight: "168px !important"
          }
        }}
        columns={[
          {
            field: "username",
            headerName: "Really long header name",
            description:
              "The identification used by the person with access to the online service."
          },
          { field: "age", headerName: "Another really long header name" }
        ]}
        rows={rows}
      />
    </div>
  );
}

I also recommend up-voting the issue that exists for this: https://github.com/mui/mui-x/issues/898.