[реагировать и Material-UI]: панель приложений (NavBar) не выбирает материал UI CSS

Question

Я просто хочу создать простую панель навигации, используя Material-UI.но, к сожалению, это не работает.Метод, упомянутый в документации, состоит из большого количества дополнительного кода, который мне не нужен.Хотите знать, можно ли добиться того же самого без всего этого кода?

это список зависимостей, установленных в 'package.json'

"dependencies": {
"@material-ui/core": "^3.9.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-redux": "^6.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"redux": "^4.0.1"

},

это мой navbar component

import React from 'react'
import { Link } from 'react-router-dom';

const Navbar = () => {
    return(
        <div>
            <nav className="nav-wrapper">
                <div className="container">
                    <Link to="/" className="brand-logo">Shopping</Link>

                    <ul className="right">
                        <li><Link to="/">Shop</Link></li>
                        <li><Link to="/cart">My cart</Link></li>
                        <li><Link to="/cart"><i className="material-icons">shopping_cart</i></Link></li>
                    </ul>
                </div>
            </nav>
        </div>
    )
}
export default Navbar;

и это мой 'App.js'

import React, { Component } from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Home from './components/Home'
import Cart from './components/Cart'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">

          <Navbar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/cart" component={Cart}/>
              </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;