React. styled-components

styled-components 공식 문서

styled-components

= css in JS.

• 스타일 정의를 CSS파일이 아닌 JS 컴포넌트에 바로 삽입하는 기법.
• 웹페이지를 HTML/CSS/JS로 분리하는 것이 아닌, 여러개의 컴포넌트로 분리하고, 각 컴포넌트에 각각의 HTML,CSS,JS를 내장하는 방식으로 작성.

styled-components 설치

$ yarn add styled-components

SYNTAX

• styled 함수를 임포트.
• styled 함수는 HTML 태그 또는 리액트 컴포넌트에 스타일을 적용함

1. HTML Element
2. styled.button` // style `;
3. React Component
4. styled(Button)` // style `;

• 두 문법 모두 ES6 Tagged Template 리터럴로 스타일을 정의한다.
• styled 함수는 해당 스타일이 적용된 HTML 요소나 React 컴포넌트를 리턴함.

• styled-components는 고유한 글로벌 네임 스페이스를 사용하지 않는다.
• 각 JS파일마다 고유한 CSS 네임 스페이스를 부여.
• 컴포넌트마다 완전히 격리된 스타일을 적용할 수 있음.

참고 - module.css로도 고유의 네임 스페이스를 지정해줄 수 있음.

---

고정 스타일링

• styled 함수가 리턴하는 것은 리액트 컴포넌트 이므로, JSX로 자유롭게 사용 가능.

import styled from 'styled-components';

const StyledButton = styled.button`
  border-radius: 0.5 rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
`

const Button ({children}) => {
  return <StyledButton>{children}</StyledButton>;
}

참고로, camelCase가 아닌 css작성하듯이 -로 구분하여 작성하면 된다.

• 브라우저에서 개발자도구-element 탭을 보면, button 태그에 임의로 클래스명이 생성된 것을 알 수 있다.
• 내부 css를 확인해보면, 클래스 선택자로 우리가 입력해준 스타일이 적용되어 있다.

---

가변 스타일링

• styled-components는 해당 컴포넌트가 받아온 props에 따라 다른 스타일을 적용하는 기능을 제공한다.

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

const StyledButton = styled.button`
  color: ${(props) => props.color || 'gray'};
  background: ${(props) => props.background || 'white'};
`;

const Button = ({ children, color, background }) => {
  return (
    <StyledButton color={color} background={background} >
      {children}
    </StyledButton>
  );
}

• || 단축평가로 기본값을 설정해주었다.
• props를 인자로 받고, props.color과 props.background를 적용한다.

위에서는 스타일이 한 줄 이므로 상관 없지만,
조건절에 따라 여러줄의 스타일을 적용해주려면 css함수를 이용해야 한다.

import React from 'react';
import styled, { css } from 'styled-components';

const StyledButton = styled.button`
  ${(props) => 
    props.primary && css`
      color: white;
      background: red;
    `};
`;

const Button = ({ children, ...props }) => {
  return (
    <StyledButton {...props}>{children}</StyledButton>
  );
}

• props에 primary가 있는 경우, css함수 냉의 스타일이 적용된다.

• <StyledButton primary>인 경우

• props가 많은 경우, ...props(Rest Params)로 children 외의 props들을 하나로 넘길 수 있다.