[React] 스타일드 컴포넌트(styled component) 사용하기

---

 

 

 

◽ 설치하기

npm i styled-components

 

 

◽ import 하기

import styled from "styled-components";

 

 

◽ 사용하기

예제 1. 버튼 만들어보기

let YellowBtn = styled.button`
    background: yellow;
    color: black;
    padding: 10px;
`

function Detail(props) {
    return (
        <div>
            <YellowBtn>버튼</YellowBtn>
        </div>
    )
}

 

 

예제 2. props로 속성 넘겨받기

let YellowBtn = styled.button`
    background: ${ props => props.bg };
    color: black;
    padding: 10px;
`

function Detail(props) {

    return (
        <div>
            <YellowBtn bg="blue">버튼</YellowBtn>
        </div>
    )
}

 

 

예제 3. 기존 스타일 재사용하기

let YellowBtn = styled.button`
  background : ${ props => props.bg };
  color : black;
  padding : 10px;
`;

// 이렇게 재사용이 가능하다.
let NewBtn = styled(YellowBtn)`
    color: red;
`

 

 

예제 4. props로 전달받기

const ProductItem = styled.div<{ columnCount: number }>`
  height: 100%;
  padding: 20px 7px;
  cursor: pointer;
  width: ${(props) => `calc(100% / ${props.columnCount} - 14px)`};
`

return (
    <ProductItem columnCount={props.columnCount} onClick={handleOnClick} />
)

 

 

예제 5. 자식 컴포넌트에 CSS 적용하기

<ProductItem columnCount={props.columnCount} onClick={handleOnClick}>
  <Image>
  </Image>
</ProductItem>

const ProductItem = styled.div<StyledProps>`
  height: 100%;
  padding: 20px 7px;
  cursor: pointer;
  width: ${(props) => `calc(100% / ${props.columnCount} - 14px)`};

  &:hover ${Image} {
    opacity: 0.5;
  }
`

 

 

 

---

 

 

 

 

◽ CSS 간섭을 줄이는 또 다른 방법

CSS 파일에서는 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공한다.

아래와 같이 [컴포넌트명.module.css] 형식으로 작명하고 컴포넌트명.js 파일에서 import하여 사용하면 해당 파일에만 적용된다.

 

---

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌

Styled-Components: specify styles of children on parents hover