如何為 Box Component Material UI 移除最后一個孩子的邊框底部

Question

我有包裝 Lisitems 的 Box 組件，對於每個孩子，我為 Box 組件設置了 1px 實心 class 的邊框底部，但我不希望它用於最后一個孩子，我該如何實現。

 {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'
}
}
})