[React] styled-components 사용 시 클래스 사용

styled-components

/* style.js */ 

export const PageWrap = styled.div.attrs(props => ({}))`
  color: #1a1a1a;
  background-color: #ffec9e;
`;

/* index.js */

import * as Styles from '../styles';

<Styles.PageWrap>
내용~~~~
</Styles.PageWrap>

위 형식처럼 style.js 를 import 후 Style. 이후에 export 정의한 스타일명으로 사용 가능하다.

 

그런데 위 처럼 사용할 때, 여러 페이지에 PageWrap 처럼 동일한 스타일을 적용하면서

일부만 다르게 적용하고 싶을 때는 아래처럼 사용 가능.

 

/* style.js */ 

export const PageWrap = styled.div.attrs(props => ({}))`
  color: #1a1a1a;
  background-color: #ffec9e;
  
  &.page-1 {
    background-color: red;
  }
  &.page-2 {
    background-color: blue;
  }
  
`;

/* page1/index.js */

import * as Styles from '../styles';

<Styles.PageWrap className="page-1">
내용~~~~
</Styles.PageWrap>

/* page2/index.js */

import * as Styles from '../styles';

<Styles.PageWrap className="page-2">
내용~~~~
</Styles.PageWrap>

위 처럼 각 페이지에 className으로 class 를 적용 가능.

 

 

css 하위태그 적용 방법

/* style.js */ 

export const PageWrap = styled.div.attrs(props => ({}))`
  color: #1a1a1a;
  background-color: #ffec9e;
  
  // 기존 css 문법과 동일하게 &뒤에 한칸 띄고 사용하면 하위태그 지정 가능
  & .page-1 {
    background-color: red;
  }
  & .page-2 {
    background-color: blue;
  }
  
`;

/* page1/index.js */

import * as Styles from '../styles';

<Styles.PageWrap>
	<Style.Content  className="page-1"> 내용~~ </Style.Content>
</Styles.PageWrap>