styled-components에서 props 받아오기

방법 1.

import styled, { css, FlattenInterpolation } from 'styled-components';

type ColorType = {
  bg: string;
  bt?: number;
}

const CustomDiv = styled.div<ColorType>`
  width: 10rem;
  height: 10rem;
  position: absolute;

  ${({ bg, bt=0 }): FlattenInterpolation<ColorType> => css`
    background-color: ${bg};
    //bt이 넘어오지 않으면 기본값은 0
    bottom: ${bt}rem
  `}
`;

<CustomDiv bg="black" />

 

 

방법 2.

import styled from 'styled-components';

const CustomDiv = styled.div`
  background-color: ${(props) => props.color || 'white'};
`

<CustomDiv color="blue" />