【React × Emotion】メディアクエリー(@media)を使ってみる

Copy
/** @jsxImportSource @emotion/react */
import "./styles.css";
import { css } from "@emotion/react";

export default function App() {
  return (
    <div className="App">
      <h1>sample</h1>
      <div css={[media_min]}>min-width</div>
      <div css={[media_max]}>max-width</div>
    </div>
  );
}

// widthが800px以上の場合に適用
const media_min = () => [
  css`
    @media (min-width: 800px) {
    background-color: lightgreen;
    }
  `
];
// widthが800px以下の場合に適用
const media_max = () => [
  css`
    @media (max-width: 800px) {
    background-color: skyblue;
    }
  `
];