emotionでスタイルを当てる

tsconfigに追記

code:tsconfig.json

"compilerOptions": {

}

リセットcss・グローバルcssを容易し、importする

code:gatsby-browser.js

import "./src/styles/ress.css";

import "./src/styles/global.css";

コンポーネントの作成はNext、Reactと同じです

code:Card.tsx

import * as React from 'react';

import {ComponentPropsWithRef} from "react";

import {css} from "@emotion/react";

import {Link} from "gatsby";

interface CardProps extends ComponentPropsWithRef<"article"> {

title: string

src: string

to: string

}

const card = css`

img {

object-fit: cover;

width: 100%;

}

`

export const Card = ({title, src, to, ...props}: CardProps) => {

return (

<Link to={to}>

<article css={card} {...props}>

<img src={src}/>

<p>{title}</p>

</article>

</Link>

)

}

code:index.tsx

...

import { Card } from "../components/Card";

import {css} from "@emotion/react";

const container = css`

max-width: 900px;

margin: 0 auto;

`

const grid = css`

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 40px;

`

const IndexPage = ({ data }: PageProps<GatsbyTypes.TopPageQuery>) => {

return (

<main css={container}>

...

<ul css={grid}>

{data.allMicrocmsBlogs.edges.map(({ node }) => (

<li key={node.blogsId}>

<Card

title={node?.title ?? ""}

src={node?.thumbnail?.url ?? ""}

to={node.blogsId ?? "/"}

/>

</li>

))}

</ul>

</main>

)

}

...

https://i.gyazo.com/9e51ddee086d48d93ac75e1b2e220b81.jpg