Ссылка React-router-dom испортила стили для кнопки AppBar material-ui - PullRequest
Новая
       14

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

0 голосов
/ 06 апреля 2019

Как объяснено здесь , вы можете легко использовать 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 Ответ

0 голосов
/ 06 апреля 2019

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

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

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

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