To implement styled rows in a table, you can create a TableRow and apply the CSS rules for even and odd rows.

Styling Rows with Material UI Version 5 (Styled Components)

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  '&:nth-of-type(odd)': {
    backgroundColor: "white",
  },
  '&:nth-of-type(even)': {
    backgroundColor: "grey",
  },
}));

or

const StyledTableRow = styled(TableRow)`
  &:nth-of-type(odd) {
    background-color: ${({ theme }) => theme.palette.action.hover}; // accessing the theme
  }
  &:nth-of-type(even) {
    background-color: "grey";
  }
`;

(compatible with Typescript and javascript)

Styling Rows with Material UI Version 4 (JSS)

using Typescript:

const StyledTableRow = withStyles((theme: Theme) =>
  createStyles({
    root: {
      '&:nth-of-type(odd)': {
        backgroundColor: "white",
      },
      '&:nth-of-type(even)': {
        backgroundColor: "grey",
      },
    },
  }),
)(TableRow);

using Javascript:

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: "white",
    },
    '&:nth-of-type(even)': {
      backgroundColor: "grey",
    },
  },
}))(TableRow);

For implementation in your code, here's an example:

render(){
  return(
    <Table multiSelectable={true} >
      <TableHeader>
        <TableRow>
          ...
        </TableRow>
      </TableHeader>
      <TableBody displayRowCheckbox={true} >
        <StyledTableRow>
          ...
        </StyledTableRow>
...

(the stripedRows feature is no longer available in newer MUI versions)

This approach to styling odd/even rows is also outlined in Material-UI's documentation.

Check out these examples to see it in action:

• Material UI Version 4
• Material UI Version 5

If you're looking for a solution, give this code snippet a try. It has been tested and verified to work smoothly on @version 4.4.2

{
this.state.data.map((row,index)=> (
 <TableRow style ={ index % 2? { background : "#fdffe0" }:{ background : "white" }}> 
...
</TableRow>
))}

Give it a shot and hopefully, it solves your issue. Happy coding! 🚀

Apologies for the delay in response, but I encountered an issue with the stripedRows method not working as expected. As a workaround, I implemented a solution using the modulo operator to alternate between two different colors:

To achieve alternating row colors, you can utilize the modulo operator in your code snippet:

{this.state.data.map((row)=> (
 <TableRow style ={ row.rank % 2? { background : "#fdffe0" }:{ background : "white" }}> 
...
</TableRow>
))}

Implementation based on @Version 4.2.1

If you want to add visual separation between rows in your table, you can utilize the stripedRows prop within the <TableBody> component. However, there may be limitations on customizing colors with this option.

<TableBody stripedRows > </TableBody>

Another approach is to assign a className to the <TableBody> component and apply colors using CSS based on even and odd row rules. In order to ensure these styles take precedence over inline styles, it may be necessary to use !important for those rules.

Searching for a different approach using React Styled Components that is similar to this one

If you are working with Material UI, it's recommended to choose @emotion over styled-components. Although they are similar, the Material UI documentation highlights some limitations when using styled-components. Therefore, opting for @emotion with Material UI can help avoid potential issues in the future.

⚠️ Warning: Using styled-components as an engine currently does not work well in SSR projects. This is because the babel-plugin-styled-components does not correctly detect the usage of the styled() utility within the @mui packages. For more information, refer to this issue. It is highly recommended to use emotion for SSR projects. Material UI

Another reason to consider using @emotion is that Material UI employs it as the default styling engine.

In order to address the issue, I will be utilizing Material UI v5.9.2 and updating several components mentioned previously in this context. The outdated components need to be replaced, and @emotion should be used to incorporate an additional pseudo-class into the TableRow component. Moreover, the color property of td inside the TableRow will be overridden to ensure coherence within a single component.

import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";

import styled from "@emotion/styled";

const TableRowStyled = styled(TableRow)`
  &:nth-of-type(odd) {
    background-color: blue;
  }
  &:nth-of-type(even) {
    background-color: purple;
  }
  & > td {
    color: white;
  }
`;

export default function App() {
  return (
    <div className="App">
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>First Name</TableCell>
            <TableCell>Last Name</TableCell>
            <TableCell>Color</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRowStyled>
            <TableCell>John</TableCell>
            <TableCell>Smith</TableCell>
            <TableCell>Red</TableCell>
          </TableRowStyled>
          <TableRowStyled>
            <TableCell>Paul</TableCell>
            <TableCell>Row</TableCell>
            <TableCell>Black</TableCell>
          </TableRowStyled>
          <TableRowStyled>
            <TableCell>Doe</TableCell>
            <TableCell>Boe</TableCell>
            <TableCell>Pink</TableCell>
          </TableRowStyled>
        </TableBody>
      </Table>
    </div>
  );
}

https://codesandbox.io/s/reactjs-material-ui-how-to-alternate-colors-between-material-ui-yrm5rl?file=/src/App.tsx