質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

506閲覧

styled-componentsでmedia queryが使えない

退会済みユーザー

退会済みユーザー

総合スコア0

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/09/01 11:16

styled-componentsを使ったmediaqueryの指定がうまくいきません。
User.tsxで450pxより小さい場合にMediaGridItemのmediaQueryが呼ばれるように記述しているのですがデベロッパーツールで確認したところclassNameはMediaGridItemのclassNameとなっているのですが指定したgrid-auto-flow: row;は記述されていませんでした。
どうやってmediaqueryを適応させてあげればいいのでしょうか?
わかる人いましたらご教授お願いしたいです。

import React, { FunctionComponent } from "react"; import styled from "styled-components"; const Item = styled.div<{ theme: any }>` display: inline-block; grid-column: ${({ theme }) => theme.column}; grid-row: ${({ theme }) => theme.row}; `; type Props = { theme: any; className?: string; }; export const GridItem: FunctionComponent<Props> = ({ theme, children, className, }) => { return ( <Item theme={theme} className={className}> {children} </Item> ); };
import { GridItem } from "components/GridItem"; import React, { FunctionComponent } from "react"; import styled from "styled-components"; const Grid = styled.div` display: grid; height: 150px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; `; const MediaGridItem = styled(GridItem)` @media (max-width: 450px) { grid-auto-flow: row; } `; type Props = { name: string; img: string; }; export const User: FunctionComponent<Props> = ({ name, img, }) => { return ( <Grid> <GridItem theme={{ column: "1/2", row: "1/12" }}> </GridItem> <GridItem theme={{ column: "2/5", row: "2/3" }}> </GridItem> <GridItem theme={{ column: "2/5", row: "3/4" }}> </GridItem> <MediaGridItem theme={{ column: "6/10", row: "7/9" }}> {name} </MediaGridItem> <MediaGridItem theme={{ column: "10/11", row: "7/9" }}> <img src="images/test.svg" /> </MediaGridItem> </Grid> ); };

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問