score:0 

 <alert onclose={handlemessageclose} 
 severity={messagetype == "success" ? "success" : messagetype == "error" ? "error" : messagetype == "info" ? "info" : "warning"} 
 sx={{ width: '100%' }}>
 {message}
</alert>

score:4

you're wrapping your color value in a template literal, therefore converting it to a regular string. use this instead:

<statusbutton title={`${blog.status.ispublished ? 'online' : 'offline'}`} color={blog.status.ispublished ? 'success' : 'warning'}/>

typescript should in that case be smart enough to see 'success' and 'warning' as constants that count as colors.


Related Query

More Query from same tag