Reactjs 你看起来不太好

我正在开发一个react应用程序，其中我们在顶部有页眉，侧导航栏和页脚，通常每个应用程序都有页眉。我的应用程序布局看起来不太好。顶部标题很好，但页面内容总是在左侧。 下面是我的index.js代码

import React ,{ Component } from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import routes from './routes.jsx';
import injectTapEventPlugin from 'react-tap-event-plugin';
import theme from './material_ui_raw_theme_file.jsx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import NotFoundPage from './staticComponents/NotFoundPage.jsx';
import configureStore from './store/configureStore.jsx';
import { syncHistoryWithStore, routerReducer} from 'react-router-redux';
import App from './components/App.jsx';
import Home from './components/home.jsx';
import ProjectIndex from './pages/projectIndex.jsx';
import SignIn from './components/SignInForm.jsx';

//for React Developer Tools
window.React = React;

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store)

injectTapEventPlugin();

render(
  <MuiThemeProvider muiTheme={theme}>
    <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component = {Home} />
        <Route path="/home" component={Home} />
        <Route path="/project" component={ProjectIndex} />
        <Route path="/signin" component={SignIn} />
        <Route path="*" component={NotFoundPage}/>
      </Route>  
    </Router>
  </Provider>
  </MuiThemeProvider>
  , document.getElementById('body')

import React，{Component}来自'React'；
从'react dom'导入{render}；
从'react redux'导入{Provider}；
从“react Router”导入{Router，Route，browserHistory，IndexRoute}；
从“/routes.jsx”导入路由；
从“react-tap事件插件”导入injectTapEventPlugin；
从“/material\u ui\u raw\u theme\u file.jsx”导入主题；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“./staticComponents/NotFoundPage.jsx”导入NotFoundPage；
从“/store/configureStore.jsx”导入configureStore；
从“react router redux”导入{syncHistoryWithStore，routerReducer}；
从“./components/App.jsx”导入应用程序；
从“./components/Home.jsx”导入Home；
从“/pages/ProjectIndex.jsx”导入ProjectIndex；
从“/components/signinfo.jsx”导入SignIn；
//对于React开发人员工具
window.React=反应；
const store=configureStore（）；
const history=syncHistoryWithStore（浏览器历史记录，存储）
injectTapEventPlugin（）；
渲染(
，document.getElementById（'body'））

))

而App.jsx代码是：-

class App extends Component {
  constructor(props){
    super(props)
     this.state = {
      logged: false,
    };
  }
  render() {

    return (
        <div className="page_container">
        <div>
        <AppBar
          title="Issue Tracker"
          iconElementRight={<Logged />}
        />
        </div>
        <div>     
          {this.props.children}
         </div>
      </div>

    );
  }
}

export default App;

import React ,{Component} from 'react';
class Home extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        <h1>Hi this is home</h1>
      </div>
    )
  }
}

export default Home;

类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
记录：false，
};
}
render（）{
返回(

任何帮助都会很好。
谢谢
您需要将样式添加到插入
道具的div中。儿童
，您可以尝试以下操作：

class App extends Component {
  constructor(props){
    super(props)
     this.state = {
      logged: false,
    };
  }
  render() {

    return (
        <div className="page_container">
        <div>
        <AppBar
          title="Issue Tracker"
          iconElementRight={<Logged />}
        />
        </div>
        <div className="main-content-wrapper">     
          {this.props.children}
         </div>
      </div>

    );
  }
}

export default App;

或

现在取决于您是否喜欢它的样式。
我们需要查看您组件的代码，可能还有问题的屏幕截图。您提供的代码还不够。如果是这样，请将答案标记为正确：）
.main-content-wrapper {
    width: 700px;
    margin: auto;
}

.main-content-wrapper {
    padding: 20px;
}