js에서 styled components reset, import없는 반응형

styled components 설치하기

npm install --save styled-components

styled reset 패키지 설치하기(reset css를 위해서)

npm install --save styled-reset

styled components reset css 만들기

src/styles/GlobalStyles.js에

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle`
    ${reset}
    *{
        box-sizing:border-box;
    }
    body{
        font-size:14px;
        background-color:rgba(20,20,20,0.5);
        font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    }
    a{
        text-decoration:none;
        color:inherit;
        cursor: pointer;
    }
    ol, ul, li {
        list-style: none;
    }
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
    input, button {
        background-color: transparent;
    }
    h1, h2, h3, h4, h5, h6 {
    font-family:'Maven Pro', sans-serif;
  }
`;

export default GlobalStyles;

입력하기. 글로벌로 된다. reset할 것들 자율적으로 쓰기

반응형( media query )

src/styles/media.js에

import { css } from "styled-components";

const sizes = {
  desktop: 1024,
  tablet: 768,
  mobile: 320,
};
export default Object.keys(sizes).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (max-width: ${sizes[label]}px) {
      ${css(...args)};
    }
  `;
  return acc;
}, {});

적어준다. 이렇게만 쓰면 파일마다 맨 위에 media를 import해서 써야 하니 import없이 쓰자.

src/styles/theme.js에

import React from "react";
import { ThemeProvider } from "styled-components";
import media from "./media";
const Theme = ({ children }) => (
  <ThemeProvider
    theme={{
      primaryFont: "Arial",
      primaryColor: "#666",
      ...media,
    }}
  >
    {children}
  </ThemeProvider>
);
export default Theme;

적어준다.
여기서 ThemeProcider는 단일 자식만 있어야 한다.

그리고 index.js에서

import React from "react";
import ReactDOM from "react-dom";
import GlobalStyles from "styles/GlobalStyles";
import App from "./App";
import Theme from "styles/theme";

ReactDOM.render(
  <React.StrictMode>
  <GlobalStyles />
    <Theme>
      <App />
    </Theme>
  </React.StrictMode>,
  document.getElementById("root")
);

이렇게 쓰면 Theme 안에 들어오는 것들은 모두 import없이 반응형을 쓸 수 있다.
GlobalStyle의 설정의 경우 컴포넌트 가장 위에 위치 시켜줘야 모든 컴포넌트에 적용된다.

예시로 간단히 보여주자면

App.js에서

import React from "react";
import styled from "styled-components";

function App() {
  return (
    <>
      <BodyWrapper>
        <Box1>one one</Box1>
        <Box2>two two</Box2>
      </BodyWrapper>
    </>
  );
}

export default App;

const BodyWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  ${({ theme }) => theme.tablet`
    justify-content: center;
  `}
`;
const Box1 = styled.button`
  width: 100px;
  height: 100px;
  margin: 10px;
`;

const Box2 = styled.button`
  width: 100px;
  height: 100px;
  margin: 10px;
`;

이렇게 사용한다면,

반응형 전에

이렇게 나오던 상자들이

이렇게 반응한다.

끝!