I am working with a grid component from Material UI:
Item element
const Item = styled(Paper)(({theme}) => ({
...theme.typography.body2,
padding: theme.spacing(2),
textAlign: 'center',
color: "black",
}));
Structure
<div className="wrapper">
<Typography variant="h3" component="h3">
List of friends
</Typography>
<div className="friends">
<Grid container
direction="row"
rowSpacing={1}
spacing={{xs: 2, md: 3}} columns={{xs: 4, sm: 8, md: 12}}
alignItems="center"
justifyContent="center"
>
{
friends.map((friend, i) => {
return <Grid item xs={4} sm={6} md={6} mt={5}>
<Item className="item"><span>{i}</span>{friend.name}</Item>
</Grid>
})
}
</Grid>
</div>
</div>
With custom CSS styles:
.wrapper{
width: 100%;
position: relative;
align-items: center;
display: flex;
flex-direction: column;
background:#eaeaea
}
.friends{
position: relative;
width: 75%;
}
This is how it currently looks:
https://i.stack.imgur.com/BaePi.png
But I want the friend numbers to be on the left and highlighted like this:
https://i.stack.imgur.com/h1PDL.png
How can I style the <span> element to achieve this? When I tried styling span with:
span{ position: absolute; left: 0 width:25%; height: 100% }
The span appeared somewhere else due to Material UI's extensive styling. Is there a simpler way to achieve this effect?
Alternatively, is there another component I can use instead of the Item (Paper) element?
Thank you for your assistance!