DataGrid looks like a table, but it's another component, it consists of multiple div-elements. But for a user it's a table and common table attributes are often required. One of them is striped rows. Below there's an example how to implement it.

In DataGrid there's a property getRowClassName, which returns the class name for the row.

... 
  const getRowClassName = (params: GridRowClassNameParams<any>) => {
    return (params.indexRelativeToCurrentPage % 2 === 0) ? 'stripeOdd' : 'stripeEven'
  };

...

<DataGrid rows={tusers}
sx={{width: 'auto'}}
  columns={columns}
  hideFooter={false}
  pagination={true}
  pageSizeOptions={[25, 50, 100]}
  initialState={{
    pagination: {paginationModel: {pageSize: 50}}
  }}
  getRowId={(row: any) => row.id}
  getRowClassName={ getMyRowClassName}
  onCellClick={openUserCardCell}
 />

As a parameter you can use not only indexRelativeToCurrentPage, which is equal to the index of the row at the current page, but also other row values to highlight rows with multiple colors.

const getRowClassNameForWide = (params: GridRowClassNameParams<any>) => {
    const lup:Date = new Date(params.row.lastUpdate)
    const toHilite: boolean = lup.setHours(lup.getHours() + 36) < Date.now()
    const seatsChanged: boolean = (params.row.seatsQuantityChanged === 1);
    if (toHilite) return 'highlighted-row'; // Apply 'highlighted-row' 
    if (seatsChanged) return 'highlightedGreen-row'; // Apply 'highlightedGreen-row' 
    return '';
  };