Why am I getting classes undefined error?

I'm new to React, can someone explain to me why I am getting classes undefined error?

Below is the code

const styles = (theme) => ({
    root: {
      width: "100%",
      marginTop: theme.spacing.unit * 3,
      overflowX: "auto"
    },
    table: {
      minWidth: 700
    },
    tableRow: {
      "&.Mui-selected, &.Mui-selected:hover": {
        backgroundColor: "purple",
        "& > .MuiTableCell-root": {
          color: "yellow"
        }
      }
    }
  });
export default function MyTable(props) {
    const { classes } = props;
    return (
        <div>
            <Box>
                <TableContainer component={Paper}>
                    <Table className={classes.table}>

I'm getting uncaught runtime errors from classes.table because it's undefined. What did I do wrong?

As mentioned in the comments you're not passing a classes property to the MyTable component. This is why you can't destructure classes from props and get undefined.

You can use the makeStyles and createStyles functions from @material-ui/core/styles.

import { makeStyles, createStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: "100%",
      marginTop: theme.spacing.unit * 3,
      overflowX: "auto",
    },
    table: {
      minWidth: 700,
    },
    tableRow: {
      "&.Mui-selected, &.Mui-selected:hover": {
        backgroundColor: "purple",
        "& > .MuiTableCell-root": {
          color: "yellow",
        },
      },
    },
  })
);

Now you can use the useStyles hook in your component to get the classes.

export default function MyTable(props) {
  const classes = useStyles();
  return (
    <div>
      <Box>
        <TableContainer component={Paper}>
          <Table className={classes.table}>
            ...
          </Table>
        </TableContainer>
      </Box>
    </div>
  );
}

See MUI v4 styles basics for more information.