Styled Components 설치

Styled Components 설치

npm i styled-components

설치 후 import

import styled from "styled-components";

➕ vscode-styled-components 익스텐션 설치하기
styled component css 적용 시 자동완성 기능 제공

Styled Components 작성법

기본 작성법

백틱안에 css코드 작성

const 컴포넌트명 = styled.태그명(div, h1, span ...)`
	css코드 작성
`

const Box = styled.div`
	width: 100px;
	height: 100px;
	background-color: tomato;
`

function App(){
  return (
    <div>
        <Box />
    </div>
  )
}

Adapting and Extending

Props로 설정 변경하기

const Box = styled.div`
	width: 100px;
	height: 100px;
	background-color: ${(props) => props.bgColor};
`

function App(){
  return (
    <div>
    	//배경색상값이 다른 div box 생성
        <Box bgColor="teal"/> 
        <Box bgColor="tomato"/>
    </div>
  )
}

기존 컴포넌트 활용하기

const Box = styled.div`
	width: 100px;
	height: 100px;
	background-color: ${(props) => props.bgColor};
`;

const Circle = styled(Box)`
	border-radius: 50px;
`;

function App(){
  return (
    <div>
        <Box bgColor="teal"/>
        <Circle bgColor="tomato"/> //Box의 속성을 그대로 가져옴
    </div>
  )
}

'As' and Attrs

태그명 변경하기

const Btn = styled.button -> 이부분을 변경하고 싶을때

  const Btn = styled.button`
    color: white;
    background-color: tomato;
    border: 0;
    border-radius: 15px;
  `;

function App(){
  return (
    <div>
    	// as를 사용하여 button태그를 a태그로 변경
		<Btn as="a" href="/">Link</Btn>
    </div>
  )
}

속성값 설정하기

.attrs({ 속성값 }) 추가하기

const Input = styled.input.attrs({ required: true, minLength: 10})`
    background-color: tomato;
  `

function App(){
  return (
    <div>
    	<Input />
    </div>
  )
}

Animations and Pseudo Selectors

애니메이션 효과

keyframes import 해주기

import styled, { keyframes } from "styled-components";

const Animation = keyframes`
	from{
		transform: rotate(deg);
	}
	to{
		transform: rotate(360deg)
	}
`;
// from to 또는 %로 작성
const Animation2 = keyframes`
  0%{
    transform:ratate(0deg);
    border-radius: 0px;
  }
  50%{
    border-radius: 100px;
  }
  100%{
    transform: rotate(360deg);
  }
`

// 스타일컴포넌트에 애니메이션 추가
const Box = styled.div`
    height: 200px;
    width: 200px;
    background-color: tomato;
    animation: ${Animation} 1s linear infinite;
  `;

Pseudo

&:hover { css디자인 }

const Box = styled.div`
    height: 200px;
    width: 200px;
    background-color: tomato;
    &:hover {
      background-color: honeydew;
    };

styled-components안의 element선택하는 법

꼭 모든 컴포넌트에 스타일컴포넌트를 적용해주지 않아도, 하나의 컴포넌트에 스타일컴포넌트 적용 후 나머지는 target으로 처리해줄 수 있다. 아래 예시의 span

const Box = styled.div`
    height: 200px;
    width: 200px;
    background-color: tomato;
	span {
		font-size: 36px;
	}
`


function App(){
  return (
    <div>
    	<Box>
    		<span> Hi! </span>
    	</Box>
    </div>
  )
}

Pseudo selector

Text 스타일컴포넌트가 span이든, p이든, div이든 Box 스타일컴포넌트에서 ${Text} 스타일컴포넌트를 직접선택하므로 태그에 상관없이 hover시 해당 스타일 적용

const Text = styled.span`
    font-size: 36px;
  `;

const Box = styled.div`
    height: 200px;
    width: 200px;
    background-color: tomato;
	${Text}:hover {
		font-size: 50px;
	}
`


function App(){
  return (
    <div>
    	<Box>
    		<Text> Hi! </Text>
    	</Box>
    </div>
  )
}