React-bootstrap app not rendering anything-CodePudding

I'm making a Navbar with react-bootstrap, and now the whole app isn't rendering anything. I'm trying to have the Navbar in a separate component and I also have some css styling in a separate file. What's the problem? The app is only rendering the background color.

Here's my react-bootstrap component:

import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import {
    BrowserRouter as Router,
    Routes, Route, Link
  } from "react-router-dom"
import '../css/styles.css'

const Header = ({user}) => {

    const padding = {
        padding: 5
      }

    return (
        <Navbar className='nav' bg="light" expand="lg">
          <Container>
            <Navbar.Brand href="#home">Nerdr</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
              <Nav.Link href="#" as="span">
                {user
                    ? <em>{user} logged in</em>
                    : <Link to="/login">login</Link>
                }
                </Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      )
    
}

export default Header

And here's my css file:

body {
  margin: 0;
  background: #eee;
  font: 1rem / 1.414 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  color: #333;
  width: 100%;
}

.nav {
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-list-wrapper {
  padding: 16px;
  margin: 64px auto 0;
  max-width: 768px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

.user-list-form {
  margin-bottom: 32px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
}

.form-row   .form-row {
  margin-top: 18px;
}

.form-wrapper fieldset {
  padding: 0;
  margin: 0;
  width: 50%;
  border: 0;
}

.form-wrapper fieldset:first-child {
  padding-right: 4px;
}

.form-wrapper fieldset:last-child {
  padding-left: 4px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #2c3e50;
}

.form-input {
  padding: 8px;
  width: 100%;
  font-size: 14px;
  border: 1px solid #dedede;
  border-radius: 4px;
  transition: border-color .25s ease-out;
}

.form-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 2px #3498db;
  outline: 0;
}

.btn,
.btn-remove,
.btn-reset {
  display: block;
  border: 0;
  cursor: pointer;
  transition: all .25s ease-out;
}

.btn-add {
  padding: 12px 18px;
  margin: 12px auto 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color: #3498db;
  border-radius: 4px;
}

.btn-add:hover {
  background-color: #2980b9;
}

.btn-remove,
.btn-reset {
  padding: 12px 18px;
  margin: 12px auto 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color: #3498db;
  border-radius: 4px;
}

.btn-remove:hover,
.btn-reset:hover {
  background-color: #2980b9;
}

.btn-reset {
  margin: 21px auto 0;
}

CodePudding user response：

Why importing global styles into component? Good is have it in app.js.

If u want use module css - rename to style.module.css a "import like import styles from 'style.module.css'" : https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

I try your header and it works:

https://codesandbox.io/s/silly-mayer-u8h0ei

CodePudding user response：

I'm using Header in App:

return (
    <div>
      <Header user={user} />
    <div className='container'>
      {user === null ?
        loginForm() :
        null
      }
    </div>
    </div>
  )