컴포넌트 만들기

const `컴포넌트이름` = styled.태그종류`
	css속성1 : 속성값;
    css속성2 : 속성값;
`

컴포넌트 재활용해서 새로운 컴포넌트 만들기

const `컴포넌트이름` = styled(재활용할 컴포넌트)`
	css속성1 : 속성값;
    css속성2 : 속성값;
`

Props 활용하기

const `컴포넌트이름` = styled.태그종류`
	css속성1 : ${(props) => 함수코드}
`

props로 조건부 렌더링 하기

const Button = styled.button`
	background: ${(props)=> props.skyblue ? "skyblue" : "white"}
`

props 값으로 렌더링 하기

const Button = styled.button`
	background: ${(props)=> props.color ? props.color : "white"}
...

<Button>Button1</Button>
<Button color="orange">Button2</Button>

//위 코드는 오랜지 색이 나옴, 컬러가 부여되지 않았을 때는 화이트가 나옴
`

전역 스타일링

import { createGlobalStyle } from "styled-components";
.
.
  const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
.
.
   function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}