Styled Components #2 Advanced : 리액트 스타일 컴포넌트 심화

eunji hwang·2020년 3월 24일

Styled Components

목록 보기

2/4

지난 Styled Components #1 Basic 포스팅에 이어 #2 Advanced를 정리!

1. Nesting

styled components 또한 scss 처럼 중첩하여 사용 할 수 있다. scss에서 클래스명이나 태그선택자를 썼다면 styled components에서는 ${스타일컴포넌트명}{ 스타일 지정; } 방식으로 사용한다.& 와 :first-child 와 같은 모든 선택자 사용가능하다.

const Box = styled.div`
    border: 2px solid black;
    background-color: #eee;
    color:green;
    ${RedButtun}{
    	background-color:red;
        border:none;
        ...
        &:hover {
        cursor:pointer;}
     }

2. Theme

`<ThemeProvider>`

ThemeProvider를 import 하여 사용할 준비
자주쓰는 속성,색상 정리하여 theme.js에 몰아넣고 (scss의 공용 var.scss같은 파일)을 import

import styled, {ThemeProvider} from 'styled-components'
import theme from './theme.js'

...중략

<ThemeProvider theme={theme}>{children}</ThemeProvider>

...하단 생략

최상위 파일에서 ThemeProvider 에게 theme.js 전달
하위 모든 컴포넌트에서 props.theme.변수명 으로 접근 가능하다.

// theme.js
const theme = {
  mainColor : 'brown',
}
// styled-components 작성
const Compo = styled.div`
color : ${props=> props.theme.mainColor} // 색상에 brown이 적용된다.
`

기본 프롭스 설정 .defaultProps

Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

<div>
    <Button>Normal</Button> <!--노멀과 띰ㄷ 의 테마 적용이 다르다.-->
    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
</div>

Normal Button의 경우 ThemeProvider 밖에 위치함으로 defaultProps의 영향을 받게 된다.

function Theme

반전 테마를 적용하는대 유용

const theme = {
  fg: "palevioletred",
  bg: "white"
};

// This theme swaps `fg` and `bg`
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

withTheme

// 클래스형 컴포넌트에서 사용법
import { withTheme } from 'styled-components';

class MyComponent extends React.Component {
  render() {
    console.log('Current theme: ', this.props.theme);
    // ...
  }
}

export default withTheme(MyComponent);

// 훅스 컴포넌트에서 사용법
import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

const MyComponent = () => {
  const themeContext = useContext(ThemeContext);

  console.log('Current theme: ', themeContext);
  // ...
}

상위컴포넌트에 테마전달, 사용형태가 withRouter와 비슷허이 ?

3. if문 사용하기

// Box 스타일드 컴포넌트 생성
const Box = styled.div`
background-color : ${ props => { // 배경화면색상에 조건분기 하여 적용
  if (조건) {
   'black'
  } else if (조건) {
    'yellow'
  } else {
    'tomato'
  }
}}
`

스타일드 컴포넌트와 If문 조건 분기를 통해 다양한 스타일 적용을 간편하게 할 수 있다!

4. SSR, Next.js

서버사이드렌더링(Server Side Randering, SSR), next.js에서 ... 흠..

pages/_document.js

코드 : next github

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}