2022-07-04

Gatsbyでブログ作る②〜MaterialUI導入

目次

前回の続き。

そんなにデザインに凝る予定もないので styled-components で書こうと思っていたけど、少し触ってみたいという理由で MaterialUI を導入することにした。

前置き

Gatsby の公式で別のページにあった JS→TS のマイグレーション見たら手間がかかりそうだったのと、TypeScript で初期化について書かれていたのを見たので、結局やり直した。init の選択項目はほぼ一緒。

MaterialUI 導入

https://mui.com/

公式の手順に沿って導入していく

npm install @mui/material @emotion/react @emotion/styled

これであとは Component を import して使っていくだけ。

リセット CSS

リセット CSS も導入の手順が公式にありますが、MUI が提供しているものを使います。中身はnormalize.cssに近いらしい。ルートコンポーネントで MUI のリセット CSS を import して JSX 内にかくだけでいいようです。

// Index.tsx
import * as React from "react"
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';

const IndexPage = () => {
  return (
    <main>
      <CssBaseline />
      <Box component="main">
      </Box>
    </main>
  )
}

export default IndexPage

レスポンシブ対応とブレークポイント

sx という属性をコンポーネントに指定することでブレークポイントとして扱うことができる。

<AppBar component="nav">
  <Box sx={{ p: { xs: 0, sm: 1}}}>
    ...
  </Box>
</AppBar>
<Toolbar sx={{minHeight:{ xs: 32, sm: 56 }}}/>

CSS Modules

MUI コンポーネントの一部を上書きしたいので CSS Modules も使うことにした。いつもは styled-components を採用するけど、公式にも書いてあったのでなんとなく CSS Modules。使ったこともなかったし。

型宣言が見つかりません(ts2307)

import { link } from './module/link.module.css'

link コンポーネントの一部のスタイルを書き換えたかったので、link.module.css ファイルを作成し、import。しかし TypeScript のエラー。

モジュール './module/link.module.css' またはそれに対応する型宣言が見つかりません。

型宣言が見つからないということなので作ります。 /src/typings/css.d.ts ファイルを作成し下記のコードを記述

declare module '*.css'

これでエラーが消えました。

© 2019 USA GIJUTSU.