Дополнительный компонент в <MuiThemeProvider /> приводит к пустой странице ж/без сообщений об ошибках

Question

Я недавно установленных материалы пользовательского интерфейса в мой Метеоре приложение с помощью npm install --save material ui

я получил <Header /> компонент, показывающий в моем app.js файле, но всякий раз, когда Я добавляю другие компоненты, localhost:3000 просто отображает пустую страницу. Пожалуйста, смотрите мой код ниже:

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')); 
}); 

ВЫШЕУКАЗАННЫЕ код работоспособен (см рисунок ниже)

Однако, если добавить еще один компонент, я получаю пустой экран

header.js это те же

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')); 
}); 

Результат просто пустой экран

Почему добавить еще один компонент (<NewPost />) внутри <MuiThemeProvider> результата в пустом экране? Я ссылался на документацию material-ui и их примеры проектов, но их структура приложения не похожа на мою. Любой совет? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, чтобы сделать этот вопрос более ясным.

Answer 1

Wow очень странно, но мне удалось получить его работу, просто добавив <div>

app.js

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

Я был бы очень признателен, если кто-нибудь может объяснить, почему добавление a div заставляет все это работать. Спасибо!