styled-components 패키지

📎 설치

• npm install --save styled-components

📎 설명

• 요소에 대한 메소드를 가지고 있음.
• styled.button(), styled.button``처럼, 버튼은 styled객체의 메소드임!

<button type="submit" class="sc-bczRLJ dsImlA">Add Goal</button>

👉🏻 고유한 클래스 이름을 갖기 때문에, 여기서 설정한 스타일은 앱에 있는 다른 컴포넌트에 절대 영향을 주지 않음. 고유한 클래스 이름은 styled components별로 유효하기 때문.

📎 사용

👾#01

const Button = styled.button`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`

👾#02_중첩 선택자, 가상선택자의 경우 &을 사용

const Button = styled.a`
  &:focus {
    outline: none;
  }
  &.invalid {
	color: red;
  }
`

👾#03_동적으로 스타일이름 추가하기

<Button className={ !isValid && 'invalid' }>
  Add Goal
</Button>

• isValid: inpunt요소에 값이 없을때(유효한 값이 아닐 때) false, state로 기본값 true를 가짐.
• invalid: 클래스 이름, 유효한 값이 아닌 경우 스타일링 변경됨.

👉🏻 input요소에 값이 없는 상태로 추가할 경우 스타일링을 동적으로 변경하기 위해 조건부를 사용함.

👾#04_동적으로 props를 전달하여 동적으로 스타일 지정

• props를 기반으로 스타일의 일부를 동적으로 변경함.

const Button = styled.button`
  ...
  color: white;
  border: 2px solid ${props=> props.invalid ? 'red' : '#ccc'};
`
...

return( ...
  <Button invalid={!isValid}>
  ...
  </Button>
);

👾#05_스타일 확장 - styled(컴포넌트)

• Box 스타일 컴포넌트 속성을 상속하여 Circle 스타일 컴포넌트 생성

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`
const Circle = styled(Box)`
  border-radius: 50px;
`
...
return( ...
  <Box bgColor="red"></Box>
);

👾#06_같은 스타일 속성으로 태그이름 변경 - as프롭

• 만든 스타일 컴포넌트에 태그속성 변경
• 확장을 사용하고 싶지 않을 때 사용
• button태그를 as프롭을 사용하여 a태그로 변경

const Button = styled.button`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`
...
return( ...
  <Button bgColor="red">Login</Button>
  <Button as="a" href="/" bgColor="blue">Login</Button>
);

👉🏻 a태그에 대한 HTML태그의 속성을 설정할 수 있음.

👾#07_공통 속성 추가하기 - attrs메서드

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

👉🏻 attrs({required: true})사용하여 객체에 추가한 속성을 해당 스타일 컴포넌트 속성으로 추가함

👾#08_미디어 쿼리 사용법

const Button = styled.button`
  ...
  color: white;
  border: 2px solid ${props=> props.invalid ? 'red' : '#ccc'};
  
  @media (min-width: 768px)
`

👉🏻 미디어쿼리 조건에 충족하면 해당 스타일이 적용됨.

👾#09_animation 사용법

• import styled, {keyframes} from 'styled-components';
• keyframes: 애니메이션 생성하여 등록

const rotationAnimation = keyframes`
  from {
	transform: rotate(0deg);
  } to {
	transform: rotate(360deg);
  }
`;

const Box = styled.div`
  height: 100px;
  width: 100px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
`;

👾#10_스타일 컴포넌트 안에서 다른 스타일 컴포넌트 사용하기

• Emoji를 Box의 자식 태그로 타케팅하여 스타일 설정

const Emoji = styled.span`
  font-size: 32px;
`;
const Box = styled.div`
  height: 100px;
  width: 100px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
  ${Emoji} {
	&:hover{
	  font-size: 64px;
	}
  }
`;

return( ...
  <Box>
    <Emoji as="p">⭐️</Emoji>
  </Box>
);

👉🏻 as프롭을 사용하여 tag name을 유동적으로 사용할 수 있다.