反应布局看起来不太好

Question

我正在研究一个反应应用程序，在这个应用程序中，我们在顶部，侧面导航栏和页脚上标题，通常每个应用程序都有它。我的应用程序布局看起来不太好.top标题很好，但页面内容总是左侧。下面 是我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; 
} 

现在由你来决定它的样式，因为你喜欢它。