明日の自分のために

moon indicating dark mode
sun indicating light mode

Shadowingの罠(GatsbyJS)

May 26, 2020

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の以下のやり取りが関係していそうです。

自分がやっていた方法では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

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