1. 기본 사용 방법

import styled from "styled-component";
// StyledComponent 작성
const MyButton = styled.button`
    padding: 8px 16px;
    border-radius: 5px;
    border: none;

		// nesting을 지웝합니다!
		:hover {
			cursor: pointer;
		}
`;

const MainPage = () => {
	return <MyButton>버튼 텍스트!!</MyButton>
}

2. Props 전달

import styled from "styled-component";

interface MyButtonProps {
	width: string;
	color: string;
	backgroundColor: string;
}

const MyButton = styled.button<MyButtonProps>`
		/*
			...styles
		*/
		width: ${({width}) => width};
		color: ${({color}) => color};
		backgroundColor: ${({backgroundColor}) => backgroundColor};
`;

const MainPage = () => {
	return <MyButton
						width="1rem"
						color="black"
						backgroundColor="white"
					>
						버튼 텍스트!!
					</MyButton>
}

3. 사전 정의된 스타일 사용

import styled, { css } from styled-component;

const initSize = (width, height) => css`
	width: ${width};
	height: ${height}
`;

// 스타일 정의
const fontLarge = css`
	font-size: 2.0rem;
`;
const initSize = (width, height) => css`
	width: ${width};
	height: ${height}
`;

// 스타일 적용
const MyButton = styled.button`
	${fontLarge};
	${initSize("100px", "100px")};
`;

const MainPage = () => {
	return <MyButton>버튼 텍스트!!</MyButton>
}

4. 스타일 상속

// 상속받을 스타일 정의
const BaseButton = styled.button`
	border-radius: 10px;
	:hover{
		pointer: cursor;
	}
`;

const RedButton = styled(BaseButton)`
		background-color: "red";
`;

const BlueButton = styled(BaseButton)`
		background-color: "blue";
`;

const MainPage = () => {
	return <>
					<RedButton>빨간 버튼!!</RedButton>
					<RedButton>파란 버튼!!</RedButton>
				</>
}