styled-components 사용법 -- 3

styled-components 사용법 — 1
styled-components 사용법 — 2
styled-components 사용법 — 3
styled-components — 스타일 확장

.attrs

태그의 속성을 변경하는 매서드.
지정할 스타일이 없어도 백틱을 꼭 써야함.

<Input />

const Input = styled.input.attrs({
  type:`text`,
});

keyframes

애니메이션 keyframes을 만드는 방법

import{ keyframes } from 'styled-components';

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

중첩, nesting

const ButtonCircle = styled.button`
  border-radius:30px;
  padding:25px 15px;
  background-color:${props => props.theme.successColor}
`;

const ButtonWrap = styled.div`
  ${ButtonCircle}:last-child { 
    font-weight:bold;
  } 
`;

mixin

mixin는 재사용할 css 그룹을 지정하는 방법.

const basicBox = css`
  border-radius:20px;
  padding:20px;
  font-size:20px;
  background-color:#fff;
`;

const Input = styled.input.attrs({
  type:`text`,
})`
${basicBox}
`;

Written by@[owlssi]
프론트 공부 중입니다.

GitHub