材料 UI 删除下划线

在材料设计中，链接通常包含下划线以示区分。然而，在某些情况下，我们可能需要移除这些下划线以使其更加美观。本文将介绍如何使用材料 UI 删除链接下划线的方法。

方法一：使用文本 span

我们可以使用文本 span 元素来显示链接，并使用 CSS 使其没有下划线。这种方法最为简单，但需要手动添加 span 元素。

<span class="no-underline">链接文本</span>

<style>
  .no-underline {
    text-decoration: none;
  }
</style>

方法二：使用材料 UI 组件

材料 UI 提供了 Typography 组件，其中 variant='subtitle1' 的样式没有下划线。我们可以使用该组件来替代常规的 span 元素。

import { Typography } from '@material-ui/core';

<Typography variant="subtitle1">链接文本</Typography>

自定义样式

如果你需要更多的自定义，你可以使用 makeStyles 创建自定义的样式。下面的示例将消除 Typography 组件中所有的下划线。

import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    textDecoration: 'none',
    '&:hover': {
      textDecoration: 'none',
    },
  },
});

const CustomTypography = (props) => {
  const classes = useStyles();
  return <Typography {...props} className={classes.root} />;
};

<CustomTypography variant="subtitle1">链接文本</CustomTypography>

以上是材料 UI 删除链接下划线的方法。你可以按照自己的需求选择适合的方法。