I am using the grid system in material Ui. And make a list of statements with a divider. I want to remove the very last divider from the list. Here is the code snippet of my TSX file
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>
);
I want to remove(border: 'none') the last divider only from the grid system. Your precious suggestions would be helpful. Thanks in Advance.
Just in case you would rather use @mui's divider component rather than the hr tag:
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}/>
);
}