How to change the text color of the selected row in material ui table

This is the only solution that worked for me

const styles = theme => ({
  tableRow: {
   '&&:hover': {
      backgroundColor: '#0CB5F3',
    },
   },
});

   <TableRow
      hover
      className={classes.tableRow}
    >

The background color is controlled in TableRow. In order to get the correct specificity (you shouldn't ever need to leverage "!important" when overriding Material-UI styles), you need to leverage the "hover" class similar to what is done within TableRow.

The color is controlled in TableCell, so that is the level where you need to control it.

For a working solution, in the styles you would have something like:

const styles = theme => ({
  tableRow: {
    "&$hover:hover": {
      backgroundColor: "blue"
    }
  },
  tableCell: {
    "$hover:hover &": {
      color: "pink"
    }
  },
  hover: {}
});

then in the rendering:

            <TableRow
              hover
              key={row.id}
              classes={{ hover: classes.hover }}
              className={classes.tableRow}
            >
              <TableCell
                className={classes.tableCell}
                component="th"
                scope="row"
              >
                {row.name}
              </TableCell>

Here's a working version based on your sandbox:

Here's a similar example, but using "selected" instead of "hover":

https://codesandbox.io/s/llyqqwmr79

This uses the following styles:

const styles = theme => ({
  tableRow: {
    "&$selected, &$selected:hover": {
      backgroundColor: "purple"
    }
  },
  tableCell: {
    "$selected &": {
      color: "yellow"
    }
  },
  selected: {}
});

and some state:

 const [selectedID, setSelectedID] = useState(null);

and changing the TableRow rendering to be:

            <TableRow
              hover
              key={row.id}
              onClick={() => {
                setSelectedID(row.id);
              }}
              selected={selectedID === row.id}
              classes={{ selected: classes.selected }}
              className={classes.tableRow}
            >

v4 of Material-UI will include some changes that should make overriding styles considerably easier (and easier to figure out how to do successfully without looking at the source code).

In v4 of Material-UI, we can use the global class names for the selected state ("Mui-selected") and for TableCell ("MuiTableCell-root") and then we only need to apply a single class to TableRow:

const styles = (theme) => ({
  tableRow: {
    "&.Mui-selected, &.Mui-selected:hover": {
      backgroundColor: "purple",
      "& > .MuiTableCell-root": {
        color: "yellow"
      }
    }
  }
});

const useStyles = makeStyles((theme) => ({
 selected: {
    backgroundColor: "green !important",
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

 const classes = useStyles();
<TableRow selected classes={{selected: classes.selected,}}/>