GatsbyJS styled-components でスタイリング

March 02, 2022

GatsbyJS styled-components を導入し CSS を反映する。

tags 表示の component に style をあてる

Install styled-components を使う

yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components
yarn add @types/styled-components

プラグインを有効にする

gatsby-config.js

...
...
...
`gatsby-plugin-styled-components`
...
...

スタイルを実装する

src/components/tagsInList.tsx

import * as React from "react"
import {Link} from "gatsby"
import kebabCase from "lodash/kebabCase"
import styled from "styled-components"

const TagsInList = ({tags}) => {
  return (
    <UlWrapper className={"tags"}>
      {tags?.map(tag => {
        return (
          <li key={tag}>
            <Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>
          </li>
        )
      })}
    </UlWrapper>
  )
}

export default TagsInList

const UlWrapper = styled.ul`
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  li {
    margin-right: 1em;
  }
`

/index

/tags