如何删除框组件材质 UI 的最后一个子项的边框底部

Question

我有 Box 组件，其中 Lisitems 被包裹，对于每个孩子，我为 Box 组件设置了一个 1px 实体类的边框，但我不希望最后一个孩子使用它，我该如何实现。

 {data.map((item, i) => {
              return (
                <Box key={i} className={classes.itemsBorderBottom}>
                  <ListItem >
                    <ListItemText>
                      <Typography }>
                        {item.message}
                      </Typography>
                      <Box>
                        <Typography}>
                          {item.name}-{item.type}
                        </Typography>
                        <Box >
                          <Typography >
                            {formatDate(item.created, 'DD/MM/YYYY')}
                          </Typography>
                          <Typography>
                            {moment(item.created).format('hh:mm a')}
                          </Typography>
                        </Box>
                      </Box>
                    </ListItemText>
                  </ListItem>
                </Box>
              )
            })}

const useStyles = makeStyles({
  
  itemsBorderBottom: {
    borderBottom: '1px solid #EFEFEF',
    '&:last-child': {
      borderBottom: 'none'
    }
  }
})

Answer 1

看看这个！

const useStyles = makeStyles({

itemsBorderBottom: {
 borderBottom: '1px solid #EFEFEF',
 '&:nth-last-child(1)': {
   borderBottom: 'none'
}
}
})