このブログの見た目はMaterial UIをベースにstyle属性を使って調整していましたが、RichLinkコンポーネントを作った際にどうしても画面の小さいスマホ用のスタイルと画面の大きいPC用のスタイルを分ける必要が出てきました。 style属性のままだとMediaQueryが使えないので今回はEmotionを導入することにしました。 手順 ①必要なNPMパッケージをインストールする yarn add @emotion/core emotion-theming gatsby-plugin-emotion # or npm install @emotion/core emotion-theming gatsby-plugin-emotion ②gatsby-plugin-emotionを読み込む module.exports = { <!-- 中略 --> plugins: [ 'gatsby-plugin-emotion', ], } ③emotion-themingを使えるようにする // 中略 import { MuiT