このブログの見た目はMaterial UIをベースにstyle属性を使って調整していましたが、RichLinkコンポーネントを作った際にどうしても画面の小さいスマホ用のスタイルと画面の大きいPC用のスタイルを分ける必要が出てきました。
style属性のままだとMediaQueryが使えないので今回はEmotionを導入することにしました。
手順
①必要なNPMパッケージをインストールする
yarn add @emotion/core emotion-theming gatsby-plugin-emotion# ornpm install @emotion/core emotion-theming gatsby-plugin-emotion
②gatsby-plugin-emotionを読み込む
gatsby-config.js
module.exports = { <!-- 中略 --> plugins: [ 'gatsby-plugin-emotion', ],}
③emotion-themingを使えるようにする
Layout.tsx
// 中略import { MuiThemeProvider, createMuiTheme } from '@material-ui/core'import { ThemeProvider } from 'emotion-theming'
// テーマを作るexport const theme = createMuiTheme({ palette: { primary: { main: '#556cd6', }, secondary: { main: '#19857b', }, },})
export const Layout: React.FC = ({ children }): JSX.Element => { return ( <> <MuiThemeProvider theme={theme}> <ThemeProvider theme={theme}> <CssBaseline /> {children} </ThemeProvider> </MuiThemeProvider> </> )}
④あとは使うだけ
import { css } from '@emotion/core'
export const Hogehoge: React.FC = () => ( <div css={theme => css({ margin: '1rem 0', {/* 600pxよりも大きい画面の場合にwidth:'80%'を指定しています */} [theme.breakpoints.up('sm')]: { width: '80%', }, }) } > Hogehoge </div>)
おわりに
今回は既にstyleをオブジェクト記法で書いていたのでEmotionでもオブジェクト記法を使っていますが、タグ付きテンプレートリテラルを使えば従来のCSSのまま書けるので使いやすい方で良いかと思います。