이번 목적

github에있는 gatsby의 블로그 템플릿에 Material-UI를 넣어 멋지게 보이고 싶습니다.
우선은 기본의 색을 결정해 봅시다.

전제 조건

node나 gatsby등은 인스톨 해 두어 주세요.
Windows10 환경 준비는 아래에서 볼 수 있습니다.

gatsby 입문 자습서를 다루는 0. 개발 환경 설정

블로그 템플릿 다운로드

원하는 디렉토리에서 다음 명령을 실행합니다.

gatsby new my-blog※任意 https://github.com/gatsbyjs/gatsby-starter-blog

다운로드 후 한 번 블로그를 시작합시다.
다음 명령을 실행합니다.

cd my-blog（ダウンロードすると上記で入力した任意の名前のディレクトリが出来ています。）
gatsby develop

http://localhost:8000

슈퍼 심블!
이를 사용자 정의합니다.

Material-UI 도입

명령을 사용하여 현재 디렉토리(여기서 my-blog)에서 다음 명령을 실행합니다.

npm install -D @material-ui/core 
npm install -D gatsby-plugin-material-ui

gatsby-plugin-material-ui는 Material-UI를 Gatsby에서 좋은 느낌으로 이용할 수 있는 플러그인이라고 생각해 주세요.
※build시에 플러그인이 없으면 에러가 되는 것 같은 것을 어딘가에 있었습니다만, 나는 재현하지 않았습니다.

설치가 완료되면 gatsby-config.js에 다음을 추가합니다.
gatsby-config.js는 현재 디렉토리 바로 아래에 있습니다.

gatsby-config.js

    (中略)
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-material-ui`,←これを追記

이것으로 Material-UI의 도입이 완료됩니다.

색상 설정을 통일

현재는 간단하지만, 향후 기능이 늘어남에 따라 색상 설정이 흐려질 수 있으므로 사이트에서 사용하는 색상을 제한하기 위해 테마를 만듭니다.

색 결정

아래 사이트에서 좋은 느낌에 색상을 결정할 수 있습니다.
htps : // 마테리아 l. 이오/레소 r세 s/코 r/#! /
나는 이런 식으로 만들었다.

src/styles/theme.js 만들기

src/styles/theme.js를 만들고 다음을 추가합니다.

src/styles/theme.js

import { createMuiTheme } from '@material-ui/core/styles';

export const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#b6ffff',
      main: '#81d4fa',
      dark: '#4ba3c7',
      contrastText: '#FFFFFF',
    },
    secondary: {
      light: '#ff93c1',
      main: '#ef6091',
      dark: '#b92a64',
      contrastText: '#000000',
    },
  },
});

이제 이 사이트에서 사용할 색상이 결정되었습니다.
상기는 아직도 커스터마이즈 가능한 것 같습니다만 우선 간단하게 갑시다.
당연합니다만, 개별 스타일로 색을 설정하는 것을 룰 결정하지 않으면 안됩니다.
여러 사람이 작성하는 경우 토론합시다.

색상 설정 수정

그러면 화면에 반영합니다.

src/components/layout.js를 편집합니다.

src/components/layout.js

import React from "react"
import { Link } from "gatsby"

import { rhythm, scale } from "../utils/typography"

import {theme} from "../styles/theme";

const Layout = ({ location, title, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  if (location.pathname === rootPath) {
    header = (
      <h1
        style={{
          ...scale(1.5),
          marginBottom: rhythm(1.5),
          marginTop: 0,
          backgroundColor: theme.palette.primary.main,←追記
        }}
      >
        <Link
          style={{
            boxShadow: `none`,
            color: theme.palette.primary.contrastText,←修正
          }}
          to={`/`}
        >
(中略)

화면에 색이 붙었습니다.
이제 색을 지정하고 싶다면 theme에서 선택하십시오 (또는 배경색이 흰색이면 아무 것도 지정하지 않습니다.)

다음 번에

이번은 이상입니다.
다음에는 Material-UI를 사용하여 헤더를 추가하려고합니다.

고마워요.