As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution.
I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success.
Below is the code snippet:
type ExploreCardsProps = {
avatar: string
headgear: string
amount: number
}
const ListText = styled(ListItemText)(()=>({
color: "white",
}))
export function ExploreCards ({avatar, headgear, amount} : ExploreCardsProps) {
return (
<List sx={{ width: '100%', maxWidth: 360, bgcolor: 'black'}}>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Luis" src= {avatar} />
</ListItemAvatar>
<ListItemText
primary="Headgear"
secondary={
<React.Fragment>
<Typography
sx={{ display: 'inline'}}
component="span"
variant="body2"
>
{headgear}
</Typography>
{amount}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
</List>
);
}