[reactjs] 머티리얼 UI 및 그리드 시스템

나는 이것에 대한 답을 찾아 보았고 내가 찾은 가장 좋은 방법은 다양한 구성 요소에서 Flex와 인라인 스타일을 사용하는 것이 었습니다.

예를 들어 두 개의 종이 구성 요소가 전체 화면을 두 개의 수직 구성 요소 (1 : 4 비율)로 나누도록하려면 다음 코드가 제대로 작동합니다.

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

이제 더 많은 계산을 통해 페이지에서 구성 요소를 쉽게 나눌 수 있습니다.

플렉스에 대한 추가 읽기

답변

npm install react-pure-grid --save

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);