React - styled-media-query 미디어 쿼리 사용법

React - styled-media-query 미디어 쿼리 사용법

 

스타일 컴포넌트에 미디어 쿼리를 적용시킬 방법

#1. styled-media-query 설치 및 generateMedia 임포트

import { generateMedia } from 'styled-media-query';

#2. breakpoint 설정

const customMedia = generateMedia({
  lgDesktop: '1350px',
  mdDesktop: '1150px',
  tablet: '960px',
  smTablet: '740px'
});

#3. 다음처럼 스타일 컴포넌트에 적용하기.

const Logo = styled.img`
  width: 10rem;
  height: 3.5rem;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0;
  ${customMedia.lessThan('tablet')`
    left: 20%;
  `}
`;

#4. 간단한 예제 - 크기가 줄면 Box를 행 넘김 해버리기

import React from "react";
import styled from "styled-components";
import { generateMedia } from "styled-media-query";

export default () => {
  return (
    <div>
      <h2>제목입니다.</h2>
      <Container>
        <Box>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </Box>
        <Box>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </Box>
      </Container>
    </div>
  );
};

const customMedia = generateMedia({
  lgDesktop: "1350px",
  mdDesktop: "1150px",
  tablet: "960px",
  smTablet: "740px"
});

const Container = styled.div`
  width: 100%;
  max-width: 970px;
  margin: 0px auto;
  display: flex;

  ${customMedia.lessThan("smTablet")`
      flex-direction:column;
  `}
`;
const Box = styled.div`
  margin: 20px;
  width: 50%;
`;

 

#5.  Theme + Media 쿼리 

#5.1 

미디어쿼리 포인트를 만들었고

색깔들을 정의

wrapper라는 css정의를 넣어주는데, 미디어쿼리 포인트 마다 색생을 지정했다.

theme오브젝트에 합쳐주기

import styled, { css } from "styled-components";
import { generateMedia } from "styled-media-query";

const customMedia = generateMedia({
  lgDesktop: "1350px",
  mdDesktop: "1150px",
  tablet: "960px",
  smTablet: "740px"
});

const Colors = {
  redColor: "#D30913",
  whiteColor: "#FFFFFF",
  grayColor: "#40414A",
  blackColor: "#000000",
  successColor: "#55efc4",
  warningColor: "#fdcb6e",
  dangerColor: "#e84393"
};
const wrapper = css`
  ${customMedia.greaterThan("lgDesktop")`
      background-color: ${Colors.successColor};
  `}
  ${customMedia.between("mdDesktop", "lgDesktop")`
      background-color: ${Colors.warningColor};
  `}
  ${customMedia.between("tablet", "mdDesktop")`
      background-color: ${Colors.dangerColor};
  `}
    ${customMedia.between("smTablet", "tablet")`
      background-color: ${Colors.successColor};
  `}
  ${customMedia.lessThan("smTablet")`
      background-color: ${Colors.warningColor};
  `}
`;

const BoxColor = css`
  background-color: ${Colors.blackColor};
  color: ${Colors.whiteColor};
`;

const theme = {
  ...Colors,
  BoxColor,
  wrapper
};
export default theme;

#5.2

이제 그냥 임포트하면 끝!! ( 물론 ThemeProvider 가 감싼 컴포넌트에서 )

import React, { Component } from "react";
import styled from "styled-components";

export default () => (
  <Footer>
    <h2>Questions?Call 1-877-742-1335</h2>
    <div>
      <ul>
        <li>FAQ </li>
        <li>Investor Relations </li>
        <li>Ways to Watch </li>
        <li>Corporate Information </li>
      </ul>
      <ul>
        <li>Help Center</li>
        <li>Jobs</li>
        <li>Terms of Use</li>
        <li>Contact Us</li>
      </ul>
      <ul>
        <li>Account</li>
        <li>Redeem Gift Cards</li>
        <li>Privacy</li>
        <li>Speed Test</li>
      </ul>
      <ul>
        <li>Media Center</li>
        <li>Buy Gift Cards</li>
        <li>Cookie Preferences</li>
        <li>Legal Notices</li>
      </ul>
      <div>
        <i></i>
        <span>English</span>
        <i></i>
      </div>
    </div>
    <span>Netflix Canada</span>
  </Footer>
);

const Footer = styled.div`
  ${props => props.theme.wrapper}
  ${props => props.theme.BoxColor}
  color: ${props => props.theme.grayColor};
`;

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA