Link компонент

Компонент Link в библиотеке MUI предназначен для создания ссылок в интерфейсе приложения с сохранением единообразного стиля и интеграции с системой маршрутизации. Он основан на стандартном HTML-элементе <a>, но расширяет его возможности за счёт встроенной поддержки темы, стилей и взаимодействия с другими компонентами библиотеки.

Основное использование

Импорт компонента производится из пакета @mui/material:

import Link from '@mui/material/Link';

Простейший пример:

<Link href="https://mui.com" target="_blank" rel="noopener">
  Перейти на сайт MUI
</Link>

В этом примере href задаёт URL, на который будет происходить переход. Атрибуты target="_blank" и rel="noopener" используются для безопасного открытия ссылки в новой вкладке.

  • href – обязательное свойство для указания адреса ссылки.

  • underline – управляет отображением подчёркивания. Возможные значения:

    • none – без подчёркивания
    • hover – подчёркивание появляется при наведении
    • always – всегда подчёркнуто

  • color – цвет ссылки. Можно использовать цвета темы (primary, secondary, textPrimary и т.д.).

  • variant – типографический вариант, аналогичный компоненту Typography (body1, body2, h6 и т.п.).

  • target – определяет, где откроется ссылка (_blank, _self и другие стандартные HTML-значения).

  • rel – атрибут безопасности для внешних ссылок (noopener, noreferrer).

Пример с настройкой стиля и цвета:

<Link
  href="https://mui.com"
  underline="hover"
  color="secondary"
  variant="body2"
>
  Документация MUI
</Link>

Интеграция с React Router

Для использования Link вместе с маршрутизатором React Router применяется свойство component. Оно позволяет рендерить внутренние маршруты без перезагрузки страницы:

import { Link as RouterLink } from 'react-router-dom';

<Link component={RouterLink} to="/about">
  О проекте
</Link>

Здесь компонент MUI Link рендерится как RouterLink, сохраняя стили библиотеки, но функционально работает как маршрутизаторная ссылка.

Работа с темой

Компонент Link полностью интегрируется с системой темы MUI. Цвет, типография и эффекты взаимодействия могут быть централизованно настроены через тему:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          fontWeight: 500,
          '&:hover': {
            textDecoration: 'underline',
          },
        },
      },
      defaultProps: {
        underline: 'hover',
        color: 'primary',
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Link href="/contact">Контакты</Link>
</ThemeProvider>

Использование styleOverrides позволяет изменить внешний вид всех ссылок в приложении, а defaultProps — установить стандартные значения свойств.

Стилизация через sx

Для тонкой настройки можно использовать свойство sx, которое поддерживает полный спектр возможностей системы стилей MUI:

<Link
  href="/profile"
  sx={{
    fontSize: '1.1rem',
    color: 'green',
    '&:hover': {
      color: 'darkgreen',
      textDecoration: 'underline',
    },
  }}
>
  Профиль
</Link>

sx объединяет CSS-подобный синтаксис и доступ к цветам и типографии темы.

Особенности и рекомендации

  • По умолчанию Link наследует типографический стиль из родителя. Для явного управления типографией рекомендуется использовать variant.
  • Для внешних ссылок всегда следует указывать rel="noopener noreferrer" вместе с target="_blank" во избежание уязвимостей.
  • При интеграции с маршрутизаторами важно использовать свойство component для корректного взаимодействия с системой навигации.
  • Свойство underline и цвет можно комбинировать с sx для достижения кастомного внешнего вида без потери совместимости с темой.

Примеры комплексного использования

Ссылка с иконкой и кастомным стилем:

import Link from '@mui/material/Link';
import IconButton from '@mui/material/IconButton';
import GitHubIcon from '@mui/icons-material/GitHub';

<Link
  href="https://github.com/mui/material-ui"
  target="_blank"
  rel="noopener"
  sx={{
    display: 'flex',
    alignItems: 'center',
    gap: 0.5,
    color: 'text.primary',
    fontWeight: 500,
    '&:hover': {
      color: 'primary.main',
    },
  }}
>
  <GitHubIcon fontSize="small" />
  Репозиторий на GitHub
</Link>

В этом примере демонстрируется комбинированная стилизация текста и иконки с использованием sx, а также безопасное открытие внешней ссылки.

Компонент Link MUI является гибким инструментом для создания ссылок любого типа — от простых текстовых до сложных элементов с иконками, интегрированных с маршрутизаторами и темой приложения. Его возможности позволяют поддерживать единообразный стиль, безопасное поведение и удобство в работе с пользовательским интерфейсом.

Оглавление