styled components - 기본

오늘의 한마디

설치

npm i styled-components

기본사용방법

const 변수명 = styled.태그명`
	width : 100%;
`

function App(){
	return (
    	<변수명></변수명>
    )
}

export default App

props값 사용

const 변수명 = styled.태그명`
	background-color : ${(props) => props.bgColor}
`

function App(){
	return (
    	<변수명 bgColor="black"></변수명>
    )
}

export default App

확장 사용

const 변수명 = styled.태그명`
	background-color : ${(props) => props.bgColor}
`

const 확장 = styled.태그명(참조할 변수명)`
	width: 100%;
`

태그명 뒤에 ()안에 변수명을 넣으면 그값의 css값을 참조하여 확장된다.