Styled-components

CSS in JS ?

Javascript 코드 내에서 일반 CSS로 구성요소의 스타일을 지정할 수 있다.

기존 CSS 스타일 방식

const divStyle = {
    backgroundColor: "black",
    width: "100px",
    height: "100px",
  };

  return <div style={divStyle}></div>

Styled-components를 사용한 방식

const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

  return <StyledDiv></StyledDiv>

기존의 React Component 스타일링 방식은 style 속성에 객체를 전달하거나 별도의 css 파일을 import 하는 방식으로 사용해왔습니다.

styled-components는 style이 적용된 컴포넌트를 직접 생성하기 때문에, 스타일링을 위한 코드가 줄어들고 기존 css 문법을 그대로 사용하기 때문에 가독성도 좋다.

특징

• styled-components는 중복되지 않는 특정 class명을 생성해 스타일을 적용하기 때문에, className이 중복되거나 selector의 우선순위 때문에 css 스타일링이 혼선을 일으키는 사고를 방지 할수 있다.

설치

yarn add styled-components

조건부 스타일링

const StyledDiv = styled.div`
  background-color: black;
  width: 100px;
  height: 100px;	
  
  ${({login}) => {
    return login ? 'display: none' : null
   }}
`;

<StyledDiv login={true}></StyledDiv>

styled-components는 Component의 props를 전달받아 사용하는 것이 가능하다.

내부에서 선언된 함수는 props를 파라미터로 실행됩니다.

확장 스타일링

const Container = styled.div`
    max-width: 600px;
    width: 100%;
    height: 100px;
  `;

const BlackContainer = styled(Container)`
  background-color: black;
`;

const RedContainer = styled(Container)`
    background-color: red;
  `;

styled-components는 새로운 Component를 선언하는 것 뿐만 아니라, 기존의 Component의 스타일을 추가하는것이 가능하다. 확장 스타일링을 사용하면 중복된 코드 양을 줄이고, 분산된 스타일을 일관적으로 관리 할 수 있어 유지보수 비용을 줄일 수 있습니다.

const MyLink = styled(Link)`
    color: black;
    text-decoration: none;
  `;

서드 파티 Component와도 호환이 가능합니다.

중첩 스코프

const StyledDiv = styled.div`

  background-color: black;

  width: 100px;

  height: 100px;

  p {

     color: white;

  }

`;

<StyledDiv>
  <p>Title</p>
</StyledDiv>

SASS의 중첩 스코프 규칙을 사용할 수 있습니다. 덕분에 내부의 모든 component를 styled-component로 생성하지 않아도, 하위 컴포넌트에게만 적용하고 싶은 스타일을 스코프 형태로 구현할 수 있습니다.