styled-component

파라미터를 받아야 하는 경우중복되는 스타일이 있는 경우
 

파라미터를 받아야 하는 경우

export const BottleSelector: VFC<Props> = ({ position, isSelected }) => {
  return (
    <Wrapper isSelected={isSelected}>
			...
    </Wrapper>
  );
};

// 파라미터를 받도록 설정하는 방법
const Wrapper = styled.View<{ isSelected: boolean }>`
  margin: ${scalePx(8)} ${scalePx(4)};
  width: ${scalePx(122)};
  height: ${scalePx(140)};
  border-radius: ${scalePx(24)};

	background-color: ${({ isSelected }): string =>
    isSelected === true
      ? theme.colors.mono.black
      : theme.colors.mono.gray[200]};

  justify-content: center;
  align-items: center;
`;
 

중복되는 스타일이 있는 경우

css로 스타일 정의해서 넣어주면 됨
const ButtonStyle = css`
  height: ${verticalScalePx(100)};
  border-radius: ${scalePx(14)};
`;

const FirstButton = styled(Button)`
  ${ButtonStyle};
`;

const SecondButton = styled(Button)`
  ${ButtonStyle};
  margin-top: ${verticalScalePx(16)};
`;