After incorporating Material UI into my Meteor application via npm install --save material ui
I successfully implemented the <Header /> component in my app.js file. However, when I try to add additional components, such as localhost:3000, all I see is a blank page. Here is the code snippet:
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'));
});
The above code works well (refer to the screenshot here) https://i.sstatic.net/jFOtM.png
However, upon adding another component, the screen turns blank
header.js remains unchanged
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'));
});
The outcome is simply a blank screen
Why does integrating one more component (<NewPost />) within <MuiThemeProvider> lead to a blank screen? I consulted the material-ui documentation and sample projects but found that their application structure differs from mine. Any guidance or suggestions on this issue? Feel free to ask for further details if needed for better clarity.