Styled-components

설치

npm install styled-components

https://styled-components.com/docs/

기본적인 사용 방법

1. const 컴포넌트명 = styled.css선택자``   

 `` : 백틱. 

 주의: 값을 집어넣을 때 따옴표를 작성하지 않는다.

import styled from "styled-components";

export default function App() {
  const SimpleButton = styled.button`
    color: red;
  `;
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
    </div>
  );
}

 

2. 만약 위에서 만든 button 컴포넌트에 또 다른 스타일 컴포넌트를 추가하고 싶다면. 즉 SimpleButton을 상속받은 LargeButton이라면 styled(상속할 컴포넌트)

const SimpleButton = styled.button`
    color: red;
  `;
  const LargeButton = styled(SimpleButton)`
    font-size: 50px;
  `;
  
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
      <LargeButton>Large</LargeButton>  
    </div>
   );

3. 컴포넌트에 props를 전달해서 생성하는 방법

import styled from "styled-components";

export default function App() {
  const PrimaryButton = styled.button`
    color: ${function (props) {
      console.log("props", props);
      return props.primary ? "white" : "black";
    }};
  `;
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}

 

4. 기존 컴포넌트를 만드는 방식으로 컴포넌트를 만들었다면

 하위 컴포넌트에서 className={props.className}을 할당해야 한다.

 styled component 에서 사용되는 className 을 사용해야 함.

props로 오는 값 중 children에는 ReactLargeButton이 할당되고, className에는 styledComponent에서 사용되는 className이 들어가게 된다.

좀 이상했던 부분이 props.children이랑 props.className이랑 따로들어가나.. 했는데, 당연하게도.. <컴포넌트>사이에</컴포넌트> 있는게 children이니까.

const ReactButton = (props) => {
    //console.log("props", props); //출력시 props에는 children:'React Large', className:'값'
    return <button className={props.className}>{props.children}</button>;
  };
  const ReactLargeButton = styled(ReactButton)`
    font-size: 30px;
  `;
  return (
    <div>
      <ReactButton>React</ReactButton>
      <ReactLargeButton>ReactLargeButton</ReactLargeButton>
    </div>
  );