I have a unique Moviecard component in my React app that I built with MUI. It has this persistent and bothersome underline on every Typography component, and no matter what I try, like setting textDecoration to none, it just won't go away.
There seems to be no logical explanation for this underline, and I've thoroughly checked the Typography API without any success. Below is the return statement along with a snapshot of the Moviecard component displaying the issue:
return (
<Box
sx={{
m: 2,
width: 200,
height: 300,
borderRadius: "15px",
overflow: "hidden",
cursor: "pointer",
scale: 1.05,
transition: { duration: 0.3 },
boxShadow: 3,
bgcolor: "background.paper",
border: "1px solid lightgrey",
}}
layout
>
<Link
to={`/moviedetail/${movie.id}`}
sx={{
textDecoration: "none",
height: "100%",
width: "100%",
position: "absolute",
zIndex: 10,
}}
aria-label="See comprehensive details about the selected movie."
>
<Card sx={{ width: "100%", height: "100%" }}>
<CardContent
sx={{
height: "20px",
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
zIndex: 20,
backgroundColor: "rgba(0,0,0,0.7)",
borderBottom: "1px solid lightgrey",
}}
>
<Typography
sx={{
textDecoration: "none",
letterSpacing: "1px",
fontSize: "2xl",
fontWeight: "bold",
color: "lightgrey",
wordBreak: "break-word",
}}
noWrap
>
{movieTitle}
</Typography>
<Typography
sx={{
p: 1,
mr: 4,
backgroundColor: (theme) =>
(movie.vote_average || 0) > 7
? theme.palette.success.main
: (movie.vote_average || 0) > 5
? theme.palette.warning.main
: theme.palette.error.main,
borderRadius: "50%",
fontWeight: "bold",
}}
>
{(movie.vote_average || 0).toFixed(1)}
</Typography>
</CardContent>
<CardMedia
component="img"
height="100%"
image={
movie.poster_path
? `https://image.tmdb.org/t/p/w500/${movie.poster_path}`
: noimage
}
alt={movie.title}
loading="lazy"
sx={{
filter: "blur(5px)",
"&.loaded": {
filter: "blur(0)",
transition: "filter 0.3s",
},
}}
onLoad={(e) => e.target.classList.add("loaded")}
fallback={
<Skeleton variant="rectangular" width="100%" height="100%" />
}
/>
</Card>
</Link>
</Box>
);