尝试在React中实现材料设计导航栏

Question

我在这里挠头，试图弄清楚为什么我看不到应用于Navbar的样式。我已经安装了所有必要的模块，但没有安装。我的代码在下面。我正在制作一个定制的导航栏，但材料很光滑，所以我想试试。

导航条形码

import React, { useState } from 'react';
import {
MDBContainer,
MDBNavbar,
MDBNavbarBrand,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBBtn,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBDropdownLink,
MDBCollapse
} from 'mdb-react-ui-kit';
export default function NavbarMaterial() {
const [showBasic, setShowBasic] = useState(false);
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand href='#'>Brand</MDBNavbarBrand>
<MDBNavbarToggler
aria-controls='navbarSupportedContent'
aria-expanded='false'
aria-label='Toggle navigation'
onClick={() => setShowBasic(!showBasic)}
>
<MDBIcon icon='bars' fas />
</MDBNavbarToggler>
<MDBCollapse navbar show={showBasic}>
<MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Home
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Link</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Dropdown
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem>
<MDBDropdownLink>Action</MDBDropdownLink>
</MDBDropdownItem>
<MDBDropdownItem>
<MDBDropdownLink>Another action</MDBDropdownLink>
</MDBDropdownItem>
<MDBDropdownItem>
<MDBDropdownLink>Something else here</MDBDropdownLink>
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
Disabled
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<form className='d-flex input-group w-auto'>
<input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
<MDBBtn color='primary'>Search</MDBBtn>
</form>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
);
}

这是我的App.js中的代码，上面有Navbar

import React from "react";
import { Routes, Route } from 'react-router-dom';
import Header from './components/Header'
import NavbarBasic from './components/NavbarBasic';
import NavbarMaterial from './components/NavbarMaterial';
import About from './components/pages/About';
import Pests from './components/pages/Pests';
import { Ants, Bees, Roaches, Mice, Wasps, Bedbugs, Flies } from './components/Pests';
import Home from './components/pages/Home';
import Services from './components/pages/Services';
import Contact from './components/pages/Contact';
function App() {
return (
<div className="main">
<Header />
<NavbarMaterial />
{/* These are the main routes and subpages */}
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/pests-we-treat' element={<Pests />} />
<Route path='/services' element={<Services />} />
<Route path='/contact' element={<Contact />} />
<Route path='/ants' element={<Ants />} />
<Route path='/wasps' element={<Wasps />} />
<Route path='/roaches' element={<Roaches />} />
<Route path='/bedbugs' element={<Bedbugs />} />
<Route path='/bees' element={<Bees />} />
<Route path='/mice' element={<Mice />} />
<Route path='/flies' element={<Flies />} />
</Routes>
</div>
);
}
export default App;

这是我的包JSON文件和依赖项。

{
"name": "weinerpest",
"homepage": "http://weinerpestservices.com",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.2.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^5.1.3",
"history": "^5.1.0",
"mdb-react-ui-kit": "^2.1.0",
"mdbreact": "^5.2.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.3",
"react-dom": "^17.0.2",
"react-dropdown": "^1.9.2",
"react-dropdown-router": "^1.0.1",
"react-responsive": "^9.0.0-beta.4",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-select": "^5.2.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

使用MDB5时，应通过以下方式创建MDBNavbarLink：

<MDBNavbarLink tag={Link} to='/test1'>Test1</MDBNavbarLink>

或

import { Link } from 'react-router-dom';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand href='/'>Navbar</MDBNavbarBrand>
<MDBNavbarNav>
<MDBNavbarLink tag={Link} to='/test1'>Test1</MDBNavbarLink>
<MDBNavbarLink tag={Link} to='/test2'>Test2</MDBNavbarLink>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}

确保项目中安装了react路由器dom。如果没有，请添加npm i react router dom