当用React Router <Link />包装时,材质UI <Tab />组件会失去样式

时间:2019-06-29 22:33:05

标签: reactjs material-ui

我的<Tab />组件在包装到React Router Dom <Link />中之前可以正常工作。我相信<Link /><a>标签包裹在其子元素周围,从而导致样式替换。

另一种可能性是<Tab />必须在<Tabs />之下精确一层,样式才能正确通过。

如何解决此问题?我愿意使用其他库来覆盖Material UI的样式。

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>
  )

0 个答案:

没有答案