React MUI Link API

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI Link API. The Link component allows customizing anchors easily. We can customize it with different colors and themes. The API provides a lot of functionality and we will learn to implement them.

Import Link API:

import Link from '@mui/material/Link';
// or
import { Link } from '@mui/material';

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

• children(node): It contains the content of the component.
• classes(object): This overrides the existing styles or adds new styles to the component.
• color(inherit/primary/secondary/string): It is used to set the color of the component. The default value is primary. 
• component(elementType): This is used for the root node.
• sx( Array<func / object / bool>/ func / object): The system prop allows defining system overrides as well as additional CSS styles. 
• TypographyClasses(object): The prop class list is applied to the Typography element.
• underline(hover/always/none): It is used to set whether the underline should appear or not. The default value is set to always.
• variant(body1/body2/button/caption/h1/h2/h3h4/h5/h6/inherit/overline/subtitle1/subtitle2/string): This sets the typography style. The default value is inherent.

CSS Rules:

• root(.MuiLink-root): It is the style applied to the root element.
• underlineNone(.MuiLink-underlineNone): It is the style applied to the root element if the underline is set to none.
• underlineHover(.MuiLink-underlineHover): It is the style applied to the root element if the underline is set to hover.
• underlineAlways(.MuiLink-underlineAlways): It is the style applied to the root element if the underline is set to always.
• button(.MuiLink-button): It is the style applied to the root element if the component is set to a button.
• focusVisible(.Mui-focusVisible): It is the state class applied to the root element if the link is keyboard focused.

Syntax: Create a Link element as follows:

<Link href="#">Click Here</Link>

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Use the following command to create a react project:

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure: The project structure should look like the below:

Steps to run the application: Run the project as follows:

npm start

Example 1: In the following example, we have a Link component.

App.js

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;

Output:

Example 2: In the following example, we have links with different underline variants.

App.js

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;

Output:

Reference: https://mui.com/material-ui/api/link/#main-content