如何删除MUI排版中的默认下划线？

Question

我有一个使用 MUI 构建的 React 应用程序的自定义 Moviecard 组件，对于我使用的每个 Typography 组件，它也有一个相当烦人且粘性的下划线。我希望摆脱它，但无法使用简单的方法做到这一点。例如，将

textDecoration

设置为 none 不起作用。

没有明显的原因需要下划线，我已经查看了 Typography API，但无济于事。以下是显示我的问题的 Moviecard 组件的返回语句和屏幕截图：

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>
  );

Answer 1

显然，问题在于包装整个代码的

Link

组件为其子级添加了下划线，并覆盖了内部 CSS 为尝试删除下划线所做的所有操作。我通过将以下代码添加到我的全局 CSS 文件中解决了该问题：

* {
    text-decoration: none;
}