0

Olá, Instalei o material-ui no react para fazer testes, mas a AppBar nao mostra na tela. Criei um componente Appbar que usa a AppBar do material-ui, depois usei ele na classe App, e mesmo assim nao funcionou.

Códigos:

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;

1 Resposta 1

0

Procure inspecionar o código pra descobrir se o componente está sendo renderizado ou não.

Sugestões:

  1. Remova aquela "div fantasma" que precede o <AppBar> e deixe o <AppBar> como raiz.
  2. Adicione uma className pra div que precede o <AppBar> e estilize em um .css externo (Não esqueça de importá-lo).

Se o <AppBar> possui estilos default / deve aparecer sem mexer em estilo nenhum, certifique-se de que não se esqueceu de importar algum estilo do material-ui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .