[노마드코더] Styled-components

Styled-components

 * 기존에 있던 styled components에 중복되는 css가 많을때 효율적으로 코드를 짜는 법

const Father = styled.div`
  display: flex;
`;

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

function App() {
  return( 
  <Father>
    <Box bgColor = "teal"/>
    <Box bgColor = "tomato"/>
  </Father>);
}

이런식으로 Box 2개가 비슷한 css를 쓰고 있으면, Box 1 , Box2로 나뉘는 것이 아니고 props를 이용해서 코드를 더 간결하게 할 수 있다.

 

* 기존에 있던거에 새로운 css만 넣어 추가하고 싶을 때

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

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

function App() {
  return( 
  <Father>
    <Box bgColor = "teal"/>
    <Circle bgColor = "tomato"/>
  </Father>);
}

기존 Box에다가 border-radius만 넣고 싶을 때는 styled.(Box)로 기존에 있던 걸 가지고 오고 추가만 하면된다!

 

* 기존에 있던 html를 바꾸고 싶을 때

<Btn as ="a" href="/">Log in</Btn>

as = "a"를 쓰게 되면 기존에있던 button이 a로 바뀌어 진다.

 

* 반복되는 컴포넌트에 속성을 주고싶을 경우

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

function App() {
  return (
    <Father>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
    </Father>
  );
}

.attrs({required: true})를 하면 required를 추가 해 줄수 있다. 또  .attrs({required: true, maxlength :10}) ,를 넣어 뒤에 속성을 추가해줄수 있다.

 

* animation을 주고싶을 때

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

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
`;
function App() {
  return (
    <Wrapper>
      <Box />
    </Wrapper>
  );
}

keyframes를 import해주고 위 코드와 같이 쓰면 된다!

from to 말고 %로 그때 상황마다 바뀌게 할수도 있다.

const rotationAnimation = keyframes`
  0%{
    transform: rotate(0deg);
    border-radius: 0px;
  }
  50% {
    transform: rotate(360deg);
    border-radius: 100px;
  }
  100% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
`;

 

* styledcomponents 안에 target을 style 시키는 법

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 40px;
    &:hover {
      font-size: 50px;
    }
    /* span:hover{
      font-size: 50px;
    } 
     이거랑 &:hover랑 같다*/
  }
`;
function App() {
  return (
    <Wrapper>
      <Box>
        <span>😀</span>
      </Box>
    </Wrapper>
  );
}

여기서 span에 styleComponents를 넣고 사용하고 싶다면

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${rotationAnimation} 1s linear infinite;
  ${Emoji} {
    font-size: 40px;
    &:hover {
      font-size: 50px;
    }
    /* span:hover{
      font-size: 50px;
    } 
     이거랑 &:hover랑 같다*/
  }
`;
function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>😀</Emoji>
      </Box>
    </Wrapper>
  );
}

${Emoji}처럼 ${}를 넣고 사용하면 된다!