gatsby-starter-blogに追加したタグの見た目を整える。material-uiのchipコンポーネント

import * as React from "react"
import { Link } from "gatsby"
import _ from "lodash"
import TagIcon from "@mui/icons-material/Tag"
import { makeStyles } from "@mui/styles"

const useStyles = makeStyles({
  tags: {},
  selectedTag: {
    color: `blue`,
  },
})

const Tags = ({ tags, selectedTag }) => {
  const classes = useStyles()
  return (
    <div className={classes.tags}>
      {tags.map(tag => (
        <li key={tag.fieldValue}>
          <TagIcon
            style={{ paddingTop: "2px", fontSize: "1.0em", color: "#09427B" }}
          />
          <Link
            to={`/tags/${_.kebabCase(tag.fieldValue)}/`}
            className={
              selectedTag === tag.fieldValue ? classes.selectedTag : ""
            }
          >
            {tag.fieldValue}
            <span> : {tag.totalCount}</span>
          </Link>
        </li>
      ))}
    </div>
  )
}

export default Tags

/* タグリスト */
import * as React from "react"
import _ from "lodash"
import { makeStyles } from "@mui/styles"
import { Chip } from "@mui/material"
// import TagIcon from '@mui/icons-material/Tag';

const useStyles = makeStyles({
  tagsContainer: {
    display: `flex`,
    flexWrap: `wrap`,
    justifyContent: `center`,
    alignItems: `center`,
  },
  tag: {
    margin: `4px`,
  },
  tagIcon: {
    paddingTop: `5px`,
    paddingBottom: `5px`,
  },
  tagsTotalCount: {
    marginLeft: `10px`,
  },
})

const sortTotalCount = tags =>
  _.orderBy(tags, ["totalCount", "fieldValue"], ["desc"])

const Tags = ({ tags, selectedTag }) => {
  const classes = useStyles()
  return (
    <div className={classes.tagsContainer}>
      {sortTotalCount(tags).map(tag => (
        // {tags.map( tag => (
        <div key={tag.fieldValue} className={classes.tag}>
          <Chip
            label={`${tag.fieldValue} ${tag.totalCount}`}
            component="a"
            href={`/tags/${_.kebabCase(tag.fieldValue)}/`}
            variant={selectedTag === tag.fieldValue ? `outlined` : ""}
            clickable
            // icon={<TagIcon className={classes.tagIcon} />}
          />
        </div>
      ))}
    </div>
  )
}

export default Tags