Material-UI makeStyles not implementing the css styles to material ui components

Question

Currently I am trying to make the customize the style of my element among other things but we can start here. I can not seem to use makeStyles properly, not sure if its because there are nested components or what. The line which is not working properly is <TableHead className={classes.top_row}>. I've tried using both @material-ui/styles and @material-ui/core makeStyles functions but to no avail.

'''

import { makeStyles} from '@material-ui/core';
const useStyles = makeStyles((theme) =>({
  table: {
    width: "100%",
  },
  
  createServiceButton:{
    width: "170px",
    height: "50px",
  },
  top_row:{
      color: '#E1C699', 
      fontWeight: 550, 
      fontFamily:'Times New Roman'
  },
  
}));
export default function ShowServiceList() {

  const classes = useStyles();
  
  return(<TableContainer component={Paper}>
        <Table aria-label="simple table">
          <TableHead  className={classes.top_row}>
            <TableRow>
              <TableCell>Subject</TableCell>
              <TableCell align="right">Description</TableCell>
              <TableCell align="right">Technology</TableCell>
              <TableCell align="right">OS</TableCell>
              <TableCell align="right">Posted By</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
              {!filterIsActive
                ? serviceList.map((service) => (
                    <Service service={service} key={service.service_id} />
                  ))
                : filterServices()}
          </TableBody>
        </Table>
      </TableContainer>
 );
}

'''

Side question, in a React-Node application does it matter whether the dependencies rae installed in node's or React's package.json ?