media query適応されない

メディアクエリを使いたく _document.tsxにmetaタグを追加しました。
しかし、コンポーネント内ででメディアクエリを使用しても、メディアクエリ内で記述されたCSSは適用されませでした。
わかる人いましたらご教授お願いしたいです。

// _document.tsx
import NextDocument, { Head, Main, NextScript } from 'next/document';

class Document extends NextDocument {
  render() {
    return (
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <body>
          <Main />
          <NextScript />
        </body>
      </Head>
    );
  }
}

export default Document;

// Contents.tsx
const Section = styled.section`
  background: blue
  @media (max-width: 300px) {
    background: red;
  }
`;

行動規範の内容に同意します

回答1件

ベストアンサー

参考までに、以下の環境で試したところ普通に動きました。

Next.js 9.5.3
styled-components 5.2.0

styled-componentsインストール

bash
1npm install styled-components

型定義など導入

bash
1npm install --save-dev @types/styled-components babel-plugin-styled-components

.babelrc作成

bash
1touch .babelrc

.babelrcの中身

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": false,
        "preprocess": false
      }
    ]
  ]
}

pages/index.tsx作成

Typescript
1import styled from 'styled-components';
2
3const Section = styled.section`
4  background-color: blue;
5
6  @media (max-width: 768px) {
7    background-color: red;
8  }
9`;
10
11const IndexPage = () => {
12  return (
13    <Section>
14      <h2>Hello World!</h2>
15    </Section>
16  );
17};
18
19export async function getServerSideProps(context) {
20  return {
21    props: {},
22  };
23}
24
25export default IndexPage;
26