极客教程React MUI Link API
Material-UI 是一个UI库，为React提供了预定义的强大且可定制的组件，以便更轻松地进行Web开发。MUI的设计基于Google的Material Design。
在本文中，我们将讨论 React MUI Link API 。Link组件允许轻松定制锚点。我们可以使用不同的颜色和主题来自定义它。API提供了很多功能，我们将学习如何实现它们。
导入Link API：
import Link from '@mui/material/Link';
// or
import { Link } from '@mui/material';
属性列表： 下面是与此组件一起使用的属性列表。根据我们的需求，我们可以访问它们并修改它们。
- children(node)： 它包含组件的内容。
- classes(object)： 这将覆盖现有的样式或向组件添加新样式。
- color(inherit/primary/secondary/string)： 用于设置组件的颜色。默认值为primary。
- component(elementType)：这用于根节点。
- sx( Array
/ func / object)： 这个系统属性允许定义系统覆盖以及额外的CSS样式。 - TypographyClasses(object)： 类属性列表应用于Typography元素。
- underline(hover/always/none)：用于设置是否显示下划线。默认值为always。
- variant(body1/body2/button/caption/h1/h2/h3h4/h5/h6/inherit/overline/subtitle1/subtitle2/string)： 这设置了排版样式。默认值为inherent。
CSS规则：
- root(.MuiLink-root)： 这是应用于根元素的样式。
- underlineNone(.MuiLink-underlineNone)： 如果下划线设置为none，则应用于根元素的样式。
- underlineHover(.MuiLink-underlineHover)： 如果下划线设置为hover，则应用于根元素的样式。
- underlineAlways(.MuiLink-underlineAlways)： 如果下划线设置为always，则应用于根元素的样式。
- button(.MuiLink-button)： 如果组件设置为按钮，则应用于根元素的样式。
- focusVisible(.Mui-focusVisible)： 如果链接具有键盘焦点，则应用于根元素的状态类。
语法： 创建一个链接元素，如下所示：
<Link href="#">Click Here</Link>
安装和创建React应用程序，并添加MUI依赖项。
步骤1: 使用以下命令创建React项目：
npx create-react-app gfg_tutorial
步骤2： 进入项目目录
cd gfg_tutorial
步骤3: 按照以下方式安装MUI依赖项:
npm install @mui/material @emotion/react
npm install @emotion/styled @mui/lab @mui/icons-material
项目结构： 项目结构应该是下面这样的：
运行该应用程序的步骤：
按以下步骤运行项目：
npm start
示例1： 在下面的示例中，我们有一个Link组件。
import "./App.css";
import * as React from "react";
import Link from "@mui/material/Link";
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Link API</strong>
</div>
<br />
<div
style={{
display: "flex",
justifyContent: "space-evenly",
width: "50%",
margin: "auto",
}}
>
<Link href=
"https://geeksforgeeks.org"
target="_blank">
Link
</Link>
</div>
</div>
);
}
export default App;
输出:
示例2: 在下面的示例中，我们有不同的下划线变体链接。
import "./App.css";
import * as React from "react";
import Link from "@mui/material/Link";
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Link API</strong>
</div>
<br />
<div
style={{
display: "flex",
justifyContent: "space-evenly",
width: "80%",
margin: "auto",
}}
>
<Link href=
"https://geeksforgeeks.org"
target="_blank"
underline="none">
{'underline="none"'}
</Link>
<Link
href=
"https://geeksforgeeks.org"
target="_blank"
underline="hover"
>
{'underline="hover"'}
</Link>
<Link
href=
"https://geeksforgeeks.org"
target="_blank"
underline="always"
>
{'underline="always"'}
</Link>
</div>
</div>
);
}
export default App;
输出：
