React-Router NavLink изменяет цвета пульсации в Material-UI ListItem

Question

Я пытаюсь обернуть Material-UI <ListItem button> в реагирующий маршрутизатор <NavLink>. В принципе, все работает нормально, но я заметил, что компонент <NavLink> меняет цвета пульсации на <ListItem button>. Если я оберну его наоборот (NavLink в ListItem), я не смогу стилизовать <ListItem> с classes.linkActive, так что это не вариант.

вот минимальный пример кода, показывающий проблему: https://codesandbox.io/s/xrxl90jv04

Я немного просматривал компоненты, но я немного новичок, чтобы отреагировать, поэтому есть ли какие-либо идеи о том, как запретить NavLink изменять цвета или как-либо сказать ListItem снова использовать палитру по умолчанию / тема?

Answer 1

Ух ты, как и в большинстве случаев, я сам отвечаю на свои вопросы. Благодаря Толле, который сказал мне создать минимальный рабочий пример, я заметил, что цвет пульсации внутри <NavLink> зависит от цвета текста (ну, в основном это был только цвет подчеркивания text-decoraion). поэтому я просто добавил стиль color: 'inherit' к <NavLink>, который работает как шарм:)

обновленный код в примере: https://codesandbox.io/s/xrxl90jv04