GatsbyJSで作ったブログでShadowingがうまくいかなかった原因

公開日: 2020年05月26日最終更新日: 2022年01月28日

gatsby-theme-blogのカスタマイズを色々試していたのですが、gatsby-theme-blogのtypographyを変更しようとしてShadowingの罠に（かってに）はまりました。

先に結果を書くと…

複数のThemeを使う場合はShadowingするディレクトリはsrc直下で行います。
user-site/src/gatsby-theme-blog/gatsby-plugin-theme-ui/index.jsではなく、user-site/src/gatsby-plugin-theme-ui/index.jsを作成してShadowingするのが正しい、ということでした。

以下本文です

gatsby-theme-blogをカスタマイズしていてわからないことがいくつかありました。

• headingのフォントが変更できない。
• index.jsがShadowingできない。

まずはTypographyを変えようと思って試行錯誤していました。 typography.jsをShadowingしましたがheadingの部分が変更できません。

gatsby-theme-blogがgatsby-plugin-theme-uiのindex.jsをShadowingしています。その中でtypographyを取り込んだあとにheadingの値を上書きしているのが関係しているようです。

ではindex.jsをShadowingすればうまくいくはずと思ったのですが、Shadowingが反映されません。

試しにnode_modulesディレクトリの中にある、gatsby-theme-blog/src/components/gatsby-plugin-theme-ui/index.jsのfonts指定をコメントアウトしたらShadowingできました。
Shadowingの優先順位がおかしくなっているのでしょうか？

色々検索していたら、GitHubの以下のやり取りが関係していそうです。

• https://github.com/gatsbyjs/gatsby/issues/15456
• https://github.com/gatsbyjs/gatsby/pull/20616

自分がやっていた方法ではShadowingを処理するときにThemeの入れ子関係の情報がなくなってしまうので優先順位が分からなくなってしまうようです。

結果、shadowingのドキュメントが更新されています。 https://github.com/gatsbyjs/gatsby/pull/20616/files

GatsbyJSのサイトではここです。確かに！書いてありますね！でもハマりました！

user-site/src/gatsby-theme-blog/gatsby-plugin-theme-ui/index.jsではなく、user-site/src/gatsby-plugin-theme-ui/index.jsを作成してShadowingするのが正しい、ということでした。

gatsby-theme-blogのディレクトリも含めて記載すると以下のとおりです。

誤り

user-site
└── src
    └── gatsby-theme-blog
        └── gatsby-plugin-theme-ui
            └──index.js // ここではなく

正しい

user-site
└── src
    |── gatsby-plugin-theme-ui
    |   └──index.js // ここでShadowingする
    └── gatsby-theme-blog

苦労しましたが一つ賢くなった気がします。 そしてフォントを変えたら、そのジャギが気になるという……。終わりなき旅路の予感。