[TIL] styled components

 

styled component 로 props 도 넘겨줄 수 있다.

const Box = styled.div`
	background-color: ${(props) => props.bgColor}; // props 도 넘겨줄 수 있다.
    width: 100px;
    height: 100px;
`;

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

 

styled(Box) 해 주면 Box 안의 모든 값을 상속받을 수 있다. 

 

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

 

tag 에 attribute 도 추가할 수 있다. 

 

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

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

const animation = keyframes`
  from {
    transform: rotate(0deg);
    border-radius:0px;
  }
  to {
    transform: rotate(360deg) ;
    border-radius: 100px ;
  }
`;

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

 

animation 도 줄 수 있다. 

 

 

const Box = styled.div`
  height: 200px ;
  width: 200px;
  background-color: tomato ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
  animation: ${animation} 1s linear infinite;
  span{
    font-size: 36px ;
    &:hover {
      font-size: 40px;
    }
  }
  span:hover{
    font-size: 50px ;
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <span>😋</span>
      </Box>
    </Wrapper>
  );
}

 

hover 도 추가 할 수 있다. 

부모요소 안에서 자식요소를 선택할 수 있다. 

 

 

const Box = styled.div`
  height: 200px ;
  width: 200px;
  background-color: tomato ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
  animation: ${animation} 1s linear infinite;
  ${Emoji}{
    &:hover {
      font-size: 98px;
    }
  }
`;

 

${Emoji} ==> Box 안의 Emoji 선택  : pseudo  selector

 

<Emoji as="p"/> Emoji 를 p 태그로 설정