Блог

Главная - Вопросы по программированию - Ссылка React-router-dom портит стили для кнопки панели приложений material-ui

Ссылка React-router-dom портит стили для кнопки панели приложений material-ui

#javascript #reactjs #button #react-router #material-ui

#javascript #reactjs #кнопка #react-router #material-ui

Вопрос:

Как объяснено здесь, вы можете легко использовать material-ui Button в сочетании с react-router-dom Link вот так:

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

<Button component={Link} to="/open-collective">
  Link
</Button>

Однако, таким образом, в любом сценарии, в котором вы пытаетесь использовать color="inherit" (который, по-видимому, является решением по умолчанию для Button в AppBar), a:hover стили по умолчанию переопределят собственные настройки темы кнопки, потому что Link отображает элемент привязки ( <a> ), в частности:

  1. При наведении на них курсора текст отображается синим цветом в большинстве браузеров.
  2. Анимация пульсации щелчка не отображается при наведении курсора мыши.

Я предполагаю, что AppBar примеры всегда используются color="inherit" , что затрудняет для новичка MUI, такого как я, поиск решения здесь. Как мне использовать color и palette без inherit и продолжать работать в AppBar ? Настройка color="primary" делает ее того же цвета, что и AppBar , делая ее невидимой, в то время как color="secondary" приводит к непригодному красному оттенку.

Что я могу сделать, чтобы вернуть мои красивые кнопки, если я не могу использовать inherit ?

Комментарии:

1. Я часто использую кнопки таким образом без каких-либо проблем со стилем, о которых вы упомянули. В этом примере я не вижу никакой визуальной разницы в стиле между обычными кнопками и используемыми Link . Если вы видите что-то другое, пожалуйста, укажите, какой браузер вы используете. Если у вас другой код, который показывает описанное вами поведение, пожалуйста, поделитесь песочницей, которая его воспроизводит.

2. @RyanCogswell Спасибо за ваш исчерпывающий ответ! Я нашел свою проблему: я использовал color="inherit" ! Установка предварительно настроенного названия цвета исправляет это 🙂

3. @RyanCogswell Я соответствующим образом обновил свой вопрос. Проблема в том, что в AppBar примерах всегда используется color="inherit" , и я еще не нашел способ получить правильную кнопку с component="Link" in AppBar в результате. В значительной степени оценил бы любое рабочее базовое решение! 🙂

4. Вот измененный пример использования Link панели приложений, и я по-прежнему не вижу ни одной из упомянутых вами проблем со стилем. Пожалуйста, поделитесь песочницей, которая воспроизводит то, что вы видите.

5. Спасибо @RyanCogswell за всю помощь! Благодаря вам я наконец нашел виновника и опубликовал ответ! : D

Ответ №1:

Благодаря @RyanCogswell мне стало известно о том, что это, скорее всего, не проблема с MUI как таковая. Вместо этого я обнаружил, что это борьба между MUI и Bootstrap (я уверен, что не рекомендуется смешивать два, однако Bootstrap предлагает некоторые интересные вещи, которых нет у MUI, и наоборот).

После дополнительной отладки я обнаружил, что Bootstrap переопределяет некоторые глобальные стили тегов, в том числе a:hover прямо здесь.

Я исправил это, переопределив эти настройки следующим образом:

 a[role="button"]:hover {
  text-decoration: none;
  color: inherit;
}

Комментарии:

1. Рад, что вы нашли виновника, но это решение, вероятно, причинит вам дополнительную боль, если вы используете кнопки ссылок за пределами панели приложений и хотите цвет, отличный от inherit . Необходимо ли «!важно»? Наличие «[role=’button’]» уже должно сделать это правило более конкретным, чем правило начальной загрузки, поэтому я ожидаю, что оно выиграет без «!важно».

2. @RyanCogswell Ты был прав! !important не было необходимости! Еще раз спасибо! 🙂