Блог

Ниже приведен мой код. Я попытался установить tableRowRoot в стиле.js, но цвет фона строки для альтернативной строки не изменился. Я надеюсь просто установить корень для строки таблицы, чтобы мне не нужно было добавлять какой-либо класс или логику в строки и т. Д. Надеюсь, вы, ребята, сможете показать мне правильный способ сделать это.

 import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  tableRowRoot: {
    'amp;:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}));
 

 import useStyles from './styles';

const Event = ({ pendingEvents, handleUpdateEvent }) => {
  const classes = useStyles();

  return (
    <Container className={classes.content}>
      <div className={classes.toolbar} />
      <Typography className={classes.title} variant='h3' gutterBottom>
        List of Pending Request
      </Typography>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label='simple table'>
          <TableHead>
            <TableRow>
              <TableCell className={classes.th}>Email</TableCell>
              <TableCell className={classes.th}>Name</TableCell>
              <TableCell className={classes.th}>Reason</TableCell>
              <TableCell className={classes.th}>Start Date</TableCell>
              <TableCell className={classes.th}>End Date</TableCell>
              <TableCell className={classes.th}>Approve / Reject</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {pendingEvents.map((event) => (
              <TableRow key={event.id}>
                <TableCell component='th' scope='row'>
                  {event.email}
                </TableCell>
                <TableCell>{event.name}</TableCell>
                <TableCell>{event.reason}</TableCell>
                <TableCell>{new Date(event.start).toDateString()}</TableCell>
                <TableCell>{new Date(event.end).toDateString()}</TableCell>
                <TableCell>
                  <IconButton
                    aria-label='Approve'
                    color='inherit'
                    onClick={() => handleUpdateEvent(event, 'approved')}
                  >
                    <ThumbUpIcon color='primary' />
                  </IconButton>
                  <IconButton
                    aria-label='Reject'
                    color='inherit'
                    onClick={() => handleUpdateEvent(event, 'rejected')}
                  >
                    <ThumbDownIcon color='secondary' />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Container>
  );
};

export default Event;
 

У вас есть tableRowRoot правило, но я не вижу, чтобы вы устанавливали имя класса в поле TableRow для применения пользовательских стилей:

 <TableRow key={event.id} className={classes.tableRowRoot} /* <------- Add this */>
 

Из документов вы также можете использовать withStyles для создания стилизованного компонента на основе исходного:

 const StyledTableRow = withStyles((theme) => ({
  root: {
    'amp;:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);
 

 <TableBody>
  {pendingEvents.map((event) => (
    <StyledTableRow key={event.id}>
      {...}
    </StyledTableRow>
  ))}
</TableBody>