styled-components 활용

1. props 활용하기

const PrimaryButton=styled.button`
	color: ${props => props.primary ? 'white' : 'black' };
`;

function App(){
	return (
		<div>
			<PrimaryButton>Normal</PrimaryButton>
			<PrimaryButton primary>Primary</PrimaryButton>
		</div>
	)
}

2. 내부 요소 접근

const Button=styled.button`
	color: ${props => props.primary ? 'white' : 'black' };
	&:hover{
		& label{
			color:green;
		}
	}
`;
const ButtonLabel=styled.label`
	font-size: 25px;
	color: white;
`

function App(){
	return (
		<div>
			<Button>
				<ButtonLabel primary="red">Label</ButtonLabel>
			</Button>
			
		</div>
	)
}

hover 시 Button의 내부 label의 속성을 변경

3. GlobalStyle

//GlobalStyles.style.js 파일
import { createGlobalStyle } from 'styled-components';

export const GlobalStyles=createGlobalStyle`
	body{
		background-color: pink;
		margin: 0px;
		padding: 0px;
	}
`

//이 파일을 App.js에서 import 한 후 삽입하면 됨