如何移除MUI Typography组件的默认下划线？

我使用MUI构建的React应用中有一个自定义Moviecard组件，其中所有Typography组件都带有恼人的顽固下划线。尝试过设置textDecoration: "none"这类常规方法均无效，也未找到下划线出现的明显原因，查阅Typography API也无济于事。

组件return语句代码如下：

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="查看所选电影的详细信息。"
    >
      <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>
);

问题截图：

核心原因 #

下划线并非Typography组件自带样式，而是由于你将整个Card包裹在了<Link>组件内部，Link的下划线样式会继承给所有子文本元素。即便给Link设置了textDecoration: "none"，也可能因CSS优先级、继承规则等问题未生效。

修复方法 #

方法1：强制覆盖Link下所有子元素的文本装饰

在Link的sx样式中添加& * { textDecoration: "none" }，强制让Link的所有后代元素都移除下划线：

<Link
  to={`/moviedetail/${movie.id}`}
  sx={{
    textDecoration: "none",
    height: "100%",
    width: "100%",
    position: "absolute",
    zIndex: 10,
    & * { textDecoration: "none" } // 新增该行代码
  }}
  aria-label="查看所选电影的详细信息。"
>

方法2：调整Link的包裹范围

将Link仅包裹需要跳转的文本区域（比如电影标题），而非整个Card，避免不必要的样式继承：

// 修改CardContent部分代码
<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",
  }}
>
  {/* 仅给电影标题包裹Link */}
  <Link to={`/moviedetail/${movie.id}`} sx={{ textDecoration: "none" }}>
    <Typography
      sx={{
        letterSpacing: "1px",
        fontSize: "2xl",
        fontWeight: "bold",
        color: "lightgrey",
        wordBreak: "break-word",
      }}
      noWrap
    >
      {movieTitle}
    </Typography>
  </Link>
  {/* 评分无需跳转，保持原样 */}
  <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>

方法3：排查全局样式冲突

如果上述方法无效，打开浏览器开发者工具（F12），选中Typography元素，在Elements面板的Styles标签中找到text-decoration样式的来源，确认是否是全局CSS或自定义MUI主题中的样式导致冲突，再针对性地添加更高优先级的样式覆盖。

内容的提问来源于stack exchange，提问作者user20028948