如何从材料 UI 选择中删除下划线

在材料 UI 中，文本组件通常有一个默认的下划线，用于表示文本具有链接功能。但是，有时我们可能需要在组件中去除下划线，这篇文章将介绍如何实现这个功能。

方法一：使用 CSS

我们可以使用 CSS 的 text-decoration 属性来去除文本下划线。下面是一个示例代码片段：

.underline-none {
  text-decoration: none;
}

在我们的 react 组件中，我们可以将此 CSS 类名应用于文本组件中。

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

<Typography className='underline-none'>没有下划线的文本</Typography>

方法二：使用 Typography 组件的 props

材料 UI 中的 Typography 组件提供了一些 props 来控制文本的样式。我们可以使用 Typography 组件的 underline prop 来控制文本是否有下划线。下面是一个示例代码片段：

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

<Typography variant='h6' underline='none'>没有下划线的文本</Typography>

在上面的代码中，我们将 underline prop 的值设置为 'none'，以去除文本下划线。

以上是两种去除材料 UI 文本下划线的方法。你可以选择其中一种或两种方法结合使用，以满足你的需求。