Zusatzkomponente in <MuiThemeProvider /> Ergebnisse in leere Seite w/ohne Fehlermeldungen

Question

Ich habe vor kurzem-Material UI in mein Meteor-Anwendung installiert mit npm install --save material ui

Ich habe das in meiner app.js Datei zeigt sich <Header /> Komponente bekommen, aber wann immer Ich füge andere Komponenten hinzu, localhost:3000 zeigt einfach eine leere Seite an. Bitte beachten Sie meinen Code unten:

header.js

import React, { Component } from 'react'; 
import AppBar from 'material-ui/AppBar'; 

class Header extends Component { 
    render() { 
    return(
     <AppBar 
     title="Header" 
     titleStyle={{textAlign: "center"}} 
     showMenuIconButton={false} 
     /> 
    ); 
    } 
} 

export default Header; 

app.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import Header from './components/header'; 
import NewPost from './components/new_post'; 

const App =() => { 
    return (
    <MuiThemeProvider> 
     <Header /> 
    </MuiThemeProvider> 
); 
}; 

Meteor.startup(() => { 
    ReactDOM.render(<App />, document.querySelector('.render-target')); 
}); 

Der obige Code gut funktioniert (siehe Abbildung unten)

Wenn ich jedoch eine andere Komponente hinzufügen, erhalte ich eine leere Bildschirm

header.js ist die gleiche

new_post.js

import React, { Component } from 'react'; 
import TextField from 'material-ui/TextField'; 

class NewPost extends Component { 
    render() { 
    return (
     <TextField 
     hintText="Full width" 
     fullWidth={true} 
     /> 
    ); 
    } 
} 

export default NewPost; 

app.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import Header from './components/header'; 
import NewPost from './components/new_post'; 

const App =() => { 
    return (
    <MuiThemeProvider> 
     <Header /> 
     <NewPost /> 
    </MuiThemeProvider> 
); 
}; 

Meteor.startup(() => { 
    ReactDOM.render(<App />, document.querySelector('.render-target')); 
}); 

Das Ergebnis ist einfach ein leerer Bildschirm

Warum eine weitere Komponente wirkt sich das Hinzufügen (<NewPost />) innerhalb von <MuiThemeProvider> Ergebnis in einem leeren Bildschirm? Ich habe auf die material-ui Dokumentation und ihre Beispielprojekte verwiesen, aber ihre Anwendungsstruktur ist meiner nicht ähnlich. Irgendein Rat? Bitte lassen Sie mich wissen, wenn Sie mehr Informationen benötigen, um diese Frage klarer zu machen.

Answer 1

Wow sehr seltsam, aber ich schaffte es durch einfaches Hinzufügen eines <div>

arbeiten lassen app.js

const App =() => { 
    return (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
     <div> 
     <Header /> 
     <NewPost /> 
     </div> 
    </MuiThemeProvider> 
); 
} 
Meteor.startup(() => { 
    ReactDOM.render(<App />, document.querySelector('.render-target')); 
}); 

Ich würde wirklich schätzen, wenn jemand erklären könnte, warum das Hinzufügen Ein div macht dies alles funktioniert. Vielen Dank!