하는 일

React로 구성 요소를 조립해서 UI를 만드는 것도 쉬워요.
styled-components로 격자 레이아웃 구성 요소 만들기
나는 그것들을 조합해서 사용하는 것이 매우 쉽다는 것을 발견했다.
한 번 만든 물건을 떼어내도 재활용할 수 있다
styled-components로 쓴 css의 기술도 정리하기 쉬우니 추천합니다.
GitHub 참조 =>https://github.com/yutaro1204/styled-components-demo

전제 조건

・styled-component 사용법
・ CSS의 display:grid;사용 방법
TypeScript로 React의 구성 요소를 쓰기 때문에 tsx를 사용합니다.

배치

우선create-react-app을 쉽게 사용할 수 있습니다.

$ npx create-react-app app-name --typescript

create-react-app을 포함하면 npx가 필요하지 않습니다.
styled-components를 설치합니다.

$ yarn add styled-components @types/styled-components

응용 프로그램을 시작합니다.기본값은 입니다http://localhost:3000하계. shell
$ yarn start


인코딩

결국 이런 구조가 될 것이다.

app-name/src
├── App.css
├── App.test.tsx
├── App.tsx
├── components
│   ├── Header.tsx // 追加
│   ├── Main.tsx // 追加
│   └── Sidepane.tsx // 追加
├── index.css
├── index.tsx
├── logo.svg
├── modules
│   └── styled-components.ts // 追加
├── react-app-env.d.ts
└── serviceWorker.ts

기본 src 디렉터리에서modules 디렉터리 만들기
styled-components를 위한 파일을 만듭니다.
styled-components.ts

import style from 'styled-components'

const styledComponents = {
  LayoutStyles: {
    Body: {
      Grid: style.div`
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-rows: 80px 1fr;
      `
    },
    Header: {
      Grid: style.div`
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        display: grid;
        grid-template-columns: 40px 1fr 1fr 1fr 1fr 40px;
        background-color: #008080;
      `,
      // 状況によってgrid-columnの値を変化させる
      Item: style.div`
        grid-column: ${ ({theme}) => theme.column };
        max-height: 80px;
      `
    },
    Main: {
      Grid: style.div`
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        display: grid;
        grid-template-columns: 100px 1fr 1fr 1fr 1fr 100px;
        height: calc(100vh - 80px);
        overflow-y: scroll;
        background-color: #ffe4c4;
      `,
      Item: style.div`
        grid-column: ${ ({theme}) => theme.column };
        grid-row: ${ ({theme}) => theme.row };
        height: 200px;
      `,
    },
    Sidepane: {
      Grid: style.div`
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        height: calc(100vh - 80px);
        overflow-y: scroll;
        background-color: #696969;
      `,
      Item: style.div`
        width: 100%;
        height: 200px;
      `
    }
  },
  ComponentStyles: {
    // As you prefer...
  }
}

export default styledComponents

여기에는 LayoutStyles에서 Body, Header 등의 CSS 정보가 요약되어 있습니다.
다른 세부 구성 요소에 대한 CSS 정보를 ComponentsStyles에 요약합니다(여기에 나열된 내용은 없습니다).
위의 styled-components.ts대로 tsx를 고치면 이런 느낌이에요
App.tsx

import React from 'react'

import styledComponents from './modules/styled-components'

import Header from './components/Header'
import Sidepane from './components/Sidepane'
import Main from './components/Main'

const BodyGrid = styledComponents.LayoutStyles.Body.Grid

const App: React.FC = () => {
  return (
    <BodyGrid>
      <Header />
      <Sidepane />
      <Main />
    </BodyGrid>
  )
}

export default App

따라서 참고로 이 Header 구성 요소 Header가 됩니다.tsx는 이런 느낌이에요
Header.tsx

import React from 'react'
import styledComponents from '../modules/styled-components'

const HeaderGrid = styledComponents.LayoutStyles.Header.Grid
const HeaderItem = styledComponents.LayoutStyles.Header.Item

const Header: React.FC = () => {
  return (
    <HeaderGrid>
      <HeaderItem theme={{ column: '2 / 3' }}>
        <p>Grid1</p>
      </HeaderItem>
      <HeaderItem theme={{ column: '3 / 4' }}>
        <p>Grid2</p>
      </HeaderItem>
      <HeaderItem theme={{ column: '4 / 5' }}>
        <p>Grid3</p>
      </HeaderItem>
      <HeaderItem theme={{ column: '5 / 6' }}>
        <p>Grid4</p>
      </HeaderItem>
    </HeaderGrid>
  )
}

export default Header

같은 요령으로 Header, Sidepane, Main을 조합하면 이런 느낌이 든다.

소박하지만 여기서부터 다양하게 꾸미면 그렇게 될까
오늘 이맘때 styled-components와reactDnD로 뭔가를 하고 싶은데...