Basic

일반적으로 styled-components를 사용할때, 이런 형태로 활용하고 있습니다.

import styled from 'styled-components'

const MyDiv = styled.div`
	width: 200px;
	height: 200px;
	background-color: red;
	&:hover{
		background-color: blue;
	}
`

*(선택자를 활용할 경우, 자기 자신(this)은 &로 작성합니다.)

이 형식 외, 더 다양한 활용법을 알아보겠습니다.

하위 컴포넌트 스타일

컴포넌트 구성 시, 하위 컴포넌트에 대한 css 또한 재정의 할 수 있습니다.

import styled from 'styled-components'

const ChildDiv = styled.div`
	width: 100px;
	height: 100px;
	background-color: blue;
`;
const ParentDiv = styled.div`
	width: 500px;
	height: 400px;

	${ChildDiv}{
		background-color: red;
	}
`;

const MyApp = () => {
	return(
		<>
			<ParentDiv>
				<ChildDiv></ChildDiv>
			</ParentDiv>
		</>
	)
}

Global Styles

개별적으로 스타일을 주는 방식은 위의 방식을 사용하지만 자주 사용하게되는 전역 스타일 또한 정의 가능합니다.

import styled from 'styled-components'

const GlobalStyle = createGlobalStyle`
	html,body{
		margin: 0;
		padding: 0;
	}
`;

const MyApp = () => {
	return(
		<>
			<GlobalStyle/>
			<Home/>
		</>
	)
}

위와 같은 방식으로 선언 후, 컴포넌트를 최상위 컴포넌트에 추가해 주게 되면 아래 모든 하위 컴포넌트에 해당 스타일이 일괄 적용됩니다.