[data grid] Cannot read properties of undefined (reading 'type')

[delciopolanco]

Description.

Datagrid doesn't work with a custom Mui theme.

Steps to reproduce

Link to example: Github

Steps:

1. git clone https://github.com/delciopolanco/MuiDatagridExample.git
2. yarn install or npm install
3. yarn dev or npm run dev.

See implementation below:

export const App = () => {
  const columns: GridColDef<(typeof rows)[number]>[] = [
    { field: 'id', headerName: 'ID', width: 90 },
    {
      field: 'firstName',
      headerName: 'First name',
      width: 150,
      editable: true,
    },
    {
      field: 'lastName',
      headerName: 'Last name',
      width: 150,
      editable: true,
    },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 110,
      editable: true,
    },
  ];
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </Box>
  );
};

export default App;

Error:

Current behavior

It doesn't show the data grid, instead it throws an error like TypeError: Cannot read properties of undefined (reading 'type')
at decomposeColor

Expected behavior

It should show the Datagrid the same as this: example

Context

I'm trying to use DataGrid from Mui within my project.

Your environment

System: System: OS: macOS 14.2.1 Binaries: Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm pnpm: Not Found Browsers: Chrome: 123.0.6312.107 Edge: Not Found Safari: 17.2.1 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/material: ^5.15.11 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: ^7.1.1 => 7.1.1 @types/react: ^18.2.66 => 18.2.75 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.4.4

Chrome version: 122.0.6261.94

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Cannot read properties of undefined (reading 'type')

[michelengelen]

Hey @delciopolanco
This is not an issue with the data grid, but with your implementation of the custom palette.
The Palette is defined as this:

export interface PaletteOptions {
  primary?: PaletteColorOptions;
  secondary?: PaletteColorOptions;
  error?: PaletteColorOptions;
  warning?: PaletteColorOptions;
  info?: PaletteColorOptions;
  success?: PaletteColorOptions;
  mode?: PaletteMode;
  tonalOffset?: PaletteTonalOffset;
  contrastThreshold?: number;
  common?: Partial<CommonColors>;
  grey?: ColorPartial;
  text?: Partial<TypeText>;
  divider?: string;
  action?: Partial<TypeAction>;
  background?: Partial<TypeBackground>;
  getContrastText?: (background: string) => string;
}

Code here

And the background property (background?: Partial<TypeBackground>;) is defined as this:

export interface TypeBackground {
  default: string;
  paper: string;
}

Code here

This means that you cannot pass a hex colorcode into the background property. It needs to be an object respecting the type Partial<TypeBackground>

[delciopolanco]

@michelengelen thanks for responding, it's working fine now.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@delciopolanco: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.