#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>
), в частности:
- При наведении на них курсора текст отображается синим цветом в большинстве браузеров.
- Анимация пульсации щелчка не отображается при наведении курсора мыши.
Я предполагаю, что 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"
inAppBar
в результате. В значительной степени оценил бы любое рабочее базовое решение! 🙂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
не было необходимости! Еще раз спасибо! 🙂