咨询：MUI中Typography覆盖Link默认样式，如何保留Link原有属性？

问题原因 #

Typography组件的文本样式（比如color、cursor）会通过CSS继承作用于内部子元素，而Link组件的默认样式优先级低于Typography的继承样式，导致Link原本的primary主题色和cursor: pointer属性被覆盖。

替代解决方案 #

除了手动添加类恢复默认属性，还有以下几种贴合MUI设计逻辑的方法：

• 给Link匹配Typography的variant属性：
  MUI的Link组件支持传入variant属性，让它继承Typography的文本样式同时保留自身交互属性，优先级会高于Typography的继承样式。示例：

  <Typography>
    Some text&nbsp;
    <Link variant="body1">a link</Link>
  </Typography>
  

  注：variant值需和外层Typography的variant匹配（Typography默认variant为body1，直接对应即可）。

• 用styled工具自定义Link组件：
  通过MUI的styled工具封装原生Link，强制锁定默认属性，避免被父元素样式覆盖。示例：

  import { styled } from '@mui/material/styles';
  import { Link as MuiLink } from '@mui/material';
  
  const CustomLink = styled(MuiLink)(({ theme }) => ({
    color: theme.palette.primary.main,
    cursor: 'pointer',
    '&:hover': {
      textDecoration: 'underline',
    },
  }));
  
  // 使用自定义Link
  <Typography>
    Some text&nbsp;
    <CustomLink>a link</CustomLink>
  </Typography>
  

• 通过sx属性提升样式优先级：
  利用MUI的sx属性（优先级高于普通CSS继承）直接设置Link的样式，快速覆盖继承属性。示例：

  <Typography>
    Some text&nbsp;
    <Link sx={{ color: 'primary.main', cursor: 'pointer' }}>a link</Link>
  </Typography>
  

• 全局修改Typography的样式规则：
  如果需要全局生效，可在主题配置中修改Typography的样式，让它不对内部Link元素覆盖默认属性。示例：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiTypography: {
        styleOverrides: {
          root: {
            '& a': {
              color: 'inherit', // 也可直接设为theme.palette.primary.main
              cursor: 'pointer',
            },
          },
        },
      },
    },
  });
  
  // 用ThemeProvider包裹应用
  <ThemeProvider theme={theme}>
    {/* 你的应用内容 */}
  </ThemeProvider>
  

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