Удаление подчеркивания у Link в React Router: как это сделать

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы убрать подчеркивание у компонента <Link> в React Router, задайте свойство textDecoration равным значению none:

jsx

Скопировать код

<Link to="/your-path" style={{ textDecoration: 'none' }}>Ваша Ссылка</Link>

Или используйте CSS-класс:

CSS

Скопировать код

.no-underline { textDecoration: none; }

jsx

Скопировать код

<Link to="/your-path" className="no-underline">Ваша Ссылка</Link>

Кинга Идем в IT: пошаговый план для смены профессии

Инлайновый стиль или CSS-классы: быстрые изменения

Для немедленного удаления подчеркивания примените инлайновый стиль:

jsx

Скопировать код

<Link to="/destination" style={{ textDecoration: 'none', color: 'inherit' }}>Ссылка с Встроенными Стилями</Link>

Это позволит моментально "заблокировать" место для подчеркивания.

Для последовательного применения стиля создайте CSS-класс:

CSS

Скопировать код

.distinct-style {
    textDecoration: 'none';
    color: 'hotpink'; /* Цвет, который невозможно не полюбить */
}

Примените этот класс к компоненту <Link>:

jsx

Скопировать код

<Link to="/destination" className="distinct-style">Ссылка в Ярко-Розовом Стиле</Link>

Styled components: новый подход к стилизации

Styled components — отличное решение для сложной стилизации. Этот подход CSS-in-JS помогает упорядочить код, не уменьшая гибкости стилей:

jsx

Скопировать код

import styled from 'styled-components';
import { Link } from 'react-router-dom';

const StyleLink = styled(Link)({
  textDecoration: 'none',
  color: 'rebeccapurple', // В честь великой Ребекки Пурпурной
  ':hover': {
    textDecoration: 'underline',
  },
});
<StyleLink to="/styled-path">Ссылка в Индивидуальном Стиле</StyleLink>

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

Прочную связь между Material-UI и React Router можно установить через свойство component:

jsx

Скопировать код

import { Button } from '@material-ui/core';
import { Link } from 'react-router-dom';

<Button
  component={Link}
  to="/materialized-path"
  style={{ textDecoration: 'none' }}
>
  Ссылка в Стиле Material-UI
</Button>

Работа со стилями наследования

Используйте стили наследования для упрощения кода:

CSS

Скопировать код

.link-master {
  color: 'inherit';
  textDecoration: 'inherit';
}

Примените этот класс к вашему <Link>:

jsx

Скопировать код

<Link to="/based-on-parent" className="link-master">Ссылка с Наследуемым Стилем</Link>

Визуализация

Представьте компонент Link как домашнюю собаку, а подчеркивание как его поводок:

Markdown

Скопировать код

До:
🔗 [Поводок] 🐕‍🦺 (с подчеркиванием)

И уберите его:

CSS

Скопировать код

.LinkComponent {
    text-decoration: none; /* Пусть радуется свободе! */
}

Markdown

Скопировать код

После:
🐕‍🦺 (текст, который теперь может свободно бегать без поводка)

Текст, как питомец, теперь безграничен! 🚶‍♂️🐕‍🦺✨

Контроль над всеми состояниями

Управляйте стилями в различных состояниях элемента, чтобы подчеркивание не появилось вновь:

CSS

Скопировать код

.state-full {
  textDecoration: 'none';
}
.state-full:hover,
.state-full:active,
.state-full:visited {
  textDecoration: 'none';
}

Динамический гардероб для ваших ссылок

В приложениях, где применяется динамическая тема, вы можете встроить стили непосредственно в логику компонента, используя инлайновые стили:

jsx

Скопировать код

// Предположим, что styleTheme получен из глобального состояния
<Link to="/dynamic" style={{ textDecoration: styleTheme.textDecoration }}>Динамичная Ссылка с Встроенными Стилями</Link>

Свежие материалы

Видео уроки по C#

6 сентября 2024

Как использовать Google Authenticator для двухфакторной аутентификации в Fortnite

6 сентября 2024

Каналы на русском языке

6 сентября 2024