Реакция макета не выглядит хорошо

Question

Я работаю над реактивным приложением, в котором у нас есть заголовок сверху, боковой навигатор и нижний колонтитул, как правило, в каждом приложении. мой макет приложения не выглядит хорошо. Заголовок заголовка в порядке, но содержимое страницы всегда слева. ниже мой 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') 

);

И 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; 

И Home.jsx код: -

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; 

и из положить является

любая помощь будет большим , благодаря

Answer 1

Вы должны добавить стили в DIV, где Вы вводите ваши props.children, вы можете попробовать что-то вроде этого:

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; 

И в вашем CSS:

.main-content-wrapper { 
    width: 700px; 
    margin: auto; 
} 

или

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

Теперь вам решать, как вам это нравится.