このブログの見た目は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
