Компонент <Tab /> пользовательского интерфейса материала теряет стилизацию при переносе с помощью React Router <Link /> - PullRequest
Новая
       4

Компонент <Tab /> пользовательского интерфейса материала теряет стилизацию при переносе с помощью React Router <Link />

0 голосов
/ 30 июня 2019

Мой <Tab /> компонент прекрасно работает перед переносом в React Router Dom <Link />. Я считаю, что <Link /> оборачивает тег <a> вокруг дочернего элемента, вызывая переопределение стиля.

Другая возможность состоит в том, что <Tab /> должен быть ровно на один уровень ниже <Tabs />, чтобы стиль прошел правильно.

Как это исправить? Я открыт для использования других библиотек, чтобы переопределить стиль пользовательского интерфейса материала. 

import React, {useState} from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import {Link} from "react-router-dom";

export default () => {
  return (
    <React.Fragment>
      <AppBar position="static">
        <Tabs value={adminView} centered>
          <Link to='/add-coupon'> // adding this turns the styling into "classic blue underline"
            <Tab
              label="Add New Coupon"
              value={addNewCoupon}
              onClick={() => setAdminView(addNewCoupon)}
            />
          </Link>
        </Tabs>
    </AppBar>
    </React.Fragment>
  )
...