反应布局看起来不太好

Question

我正在开发一个 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')

);

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

您需要在注入 props.children 的 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;

在你的 CSS 中：

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

或

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

现在由您来设置自己喜欢的样式。