css – Cant modification message shade to white

I’m brand-new to Typescript as well as attempting to alter the message to white yet I can not determine exactly how.

Hope any person can aid me in the appropriate instructions.
I appear to be stuck as well as have actually attempted various methods as well as services yet cant appear to discover or figure It out.

This is my code

 kind ExploreCardsProps = {
character: string
headwear: string
quantity: number
}
const ListText = styled( ListItemText)(()=>>( {
shade: "white",.

} )).


export feature ExploreCards ({character, headwear, quantity}: ExploreCardsProps) {
return (.

<< Checklist sx= {{size: '100%', maxWidth: 360, bgcolor: 'black'}} >>.
<< ListItem alignItems=" flex-start">
<> < ListItemAvatar>>.
<< Character alt=" Luis" src= {character}/>>.
<.
<< ListItemText.
main=" Headwear"
additional= {
<< React.Fragment>>.
<< Typography.
sx= {{screen: 'inline'}}
part=" period"
variation=" body2"
>>.
{headgear}
<.
{quantity}
<.
}
/>>.
<.
<< Divider panel variation=" inset" part=" li"/>>.

<.
);.
}