Next.js와 호환이 잘 되는, SSR에 최적화된 스타일 컴포넌트, Emotion

mediaQuery

Emotion에서 미디어 쿼리를 사용하는 것은 일반 css에서 사용하는 것과 같습니다.

const Wrapper = styled.div`
  font-size: 100px;
  @media (min-width: 420px) {
    font-size: 50px;
  }
`;

재사용 가능한 미디어 쿼리

미디어 쿼리는 반응형 앱을 만드는 데 유용할 수 있지만 반복해서 작성해주면 각 스타일마다 다르게 적용될 수도 있고 비효율적입니다. 사용할 때마다 다시 작성하는 대신 상수로 옮겨 사용하고 싶을 때마다 참조할 수 있습니다.

const breakpoints = [576, 768, 992, 1200];
const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);

const Wrapper = styled.div`
  font-size: 100px;
  ${mq[0]} {
    font-size: 50px;
  }
`;

facepaint

상수로 미디어 쿼리를 정의하는 것이 매번 미디어 쿼리를 다시 작성하는 것보다 훨씬 쉽지만 일반적으로 다른 중단점에서 동일한 속성을 변경하려고 하기 때문에 여전히 문제가 있습니다. facepaint를 사용하여 미디어 쿼리에서 각 css 속성이 배열로 있어야 하는 것을 정의할 수 있게 하여 쉽게 사용할 수 있습니다..

단, 객체스타일 css에서만 사용할 수 있습니다.

yarn add facepaint

const mq = facepaint(breakpoints.map((bp) => `@media (min-width: ${bp}px)`));

Theming

theme는 @emotion/react패키지에 포함되어 있습니다.

ThemeProvider 앱의 최상위 수준에 추가하고 props.theme로 테마에 접근할 수 있는 기능을 제공합니다.

// _app.tsx
import {ThemeProvider} from '@emotion/react'

declare module '@emotion/react' {
    export interface DefaultTheme {
     colors: {
         primary: string;
     }
    }
}

const theme:DefaultTheme = {
    colors: {
      primary: 'hotpink'
    }
}

return(
    <ThemeProvider theme={theme}>
          <Component {...pageProps} />
      </ThemeProvider>
)

// styled에서 props.theme로 사용
const Wrapper = styled.div`
    color: ${(props)=> props.theme.colors.primary}
`