React Component Styling : Styled Components 사용법

1. 기본 사용법
   먼저 StyleButton.jsx라는 컴포넌트 파일을 만들고 내부에 이렇게 작성한다.

import styled, { css } from "styled-components";

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
  `;

export default StyledButton;

그리고 App.js에

 <p>
          <StyledButton>버튼</StyledButton>
 </p>

이렇게 버튼을 추가해준다.
이런 방법으로 작성한 CSS속성은 버튼 태그에 추가되고, head에 스타일 속성이 자동으로 만들어지고,body 부분 태그에는 자동으로 미리 지정된 Class name이 생성된다. 이는 스타일 컴포넌트의 기능으로 스타일 스코프 오염을 방지 할 수 있다.

2.커스텀 태그에 props를 추가하여 props를 전달받아 무언가를 표현 할 수 있다.

 <StyledButton primary>버튼</StyledButton>

즉 primary가 true일 때, 한편 StyleButton.jsx 파일에서는...

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  ${(props) =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `}
`;

이렇게 표현식으로 props를 전달받고, props.primary가 존재할 때 새로운 CSS 선언으로 스타일을 덮어쓸수 가 있다.

3. 또한 StyledButton 태그를 다른 태그 처럼 사용할 수 있는 방법도 있다.
   예를 들면:

          <StyledButton as="a" href="/">
            버튼
          </StyledButton>

특정 스타일은 똑같이 상속 가져와서 쓸 수 있다. 그리고 이 as에 특정 컴포넌트를 지칭해서 컴포넌트에 스타일을 넣어서 사용 할수도 있다.
먼저 App.js 페이지 위에

const UppercaseButton = (props) => (
  <button {...props} children={props.children.toUpperCase()} />
);

이 때 버튼 태그는 이렇게 바꾸어준다.

  <StyledButton as={UppercaseButton}>button</StyledButton>

-props를 전개연산자로 전달해준다.뜻 인즉 {...props}로 className을 이어받는다. 이 방법으로 StyledButton 컴포넌트의 스타일을 UppercaseButton에 적용할 수 있다.

이외에도 더 자주 사용하는 방식이 있다.

const MyButton = (props) => (
  <button {...props} children={` ${props.children}`} />
);
const StyledMyButton = styled(MyButton)`
  background: transparent;
  border-radius: 3px;
  border: 2px solid ${(props) => props.color || "palevioletred"};
  color: ${(props) => props.color || "palevioletred"};
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
`;

 <StyledMyButton>button</StyledMyButton>