Estoy usando el sistema de cuadrícula en el material Ui. Y haz una lista de declaraciones con un divisor. Quiero eliminar el último divisor de la lista. Aquí está el fragmento de código de mi archivo TSX
return ( <Grid key={index}> <Grid style={{ display: 'flex', flexDirection: 'row' }}> <Grid item direction="column"> <FontAwesomeIcon icon={listItem.className} color={listItem.color} /> </Grid> <Grid item xs={3} direction="column"> <span style={{ paddingLeft: '5px', fontSize: '12px', fontWeight: 'bold' }}>{listItem.title}:</span> </Grid> <Grid item xs={9}> <span className={classes.listSubHeader} style={ listItem.title === 'Spread & Liquidity' && listItem.color === theme.palette.error.main ? { color: theme.palette.error.main, fontWeight: 'bold' } : { color: theme.palette.text.primary } }> {listItem.sentence} </span> </Grid> </Grid> <hr className={classes.divider} /> </Grid> );Quiero eliminar (borde: 'ninguno') el último divisor solo del sistema de cuadrícula. Sus valiosas sugerencias serían útiles. Gracias de antemano.
En caso de que prefiera usar el componente divisor de @mui en lugar de la etiqueta hr :
import * as React from 'react'; import Divider from '@mui/material/Divider'; const dividerStyle = { borderTop: "2px dashed black" } export default function DashedDivider() { return ( <Divider sx={dividerStyle}/> ); }