React: Appbar material-ui is not shown

Question

Hello, I installed the material-ui in React to do tests, but Appbar does not show on screen. I created an Appbar component that uses the Appbar material-ui, then used it in the App class, and it still didn’t work.

Codes:

Appbar.js:

        import React from "react"
    import { AppBar, Toolbar, Typography, List, ListItem, ListItemText } from "material-ui"

    class Appbar extends React.Component {
        render() {
            return (
                <div>
                    <AppBar color="primary" position="static">
                        <Toolbar>
                            <Typography variant="title" color="inherit">
                                InstaPets
                            </Typography>
                            <List component="nav">
                                <ListItem component="div">
                                    <ListItemText>
                                        <a href="facebook.com">Feed</a>
                                    </ListItemText>

                                    <ListItemText>

                                        <a href="facebook.com">Post</a>
                                    </ListItemText>

                                    <ListItemText>
                                        <a href="facebook.com">Login/Register</a>
                                    </ListItemText>

                                </ListItem>
                            </List>
                        </Toolbar>
                    </AppBar>
                </div>
            )
        }
    }
    export default Appbar;

App.js:

import React from 'react';
import Appbar from "./components/Appbar"
class App extends React.Component {
  render() {
    return(
      <Appbar/>
    )
  }
}

export default App;

Answer 1

Check the code to find out if the component is being rendered or not.

Suggestions:

1. Remove that "ghost div" that precedes the <AppBar> and let the <AppBar> as a root.
2. Add a className for div that precedes the <AppBar> and style in an external . css (Don’t forget to import it).

If the <AppBar> has default styles / should appear without tampering with any style, make sure you have not forgotten to import some style from the material-ui.