React StyledComponents 2

animation을 적용하는 방법

const Wrapper = styled.div`
	display: flex;
`;
const rotationAnimation = keyframes`
	from {
		transform:rotate(0deg);
		border-radius: 0px;
	}
	to {
		transform:rotate(360deg);
		border-radius: 100px;
	}
`;
const Box = styled.div`
	background-color: tomato;
	width: 100px;
	height: 100px;
	distplay: flex;
	justify-content: center
	align-items: center;
	animation:${rotationAnimation} 1s linear infinite;
	span {
		font-size: 36px;
	}
`;

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

Selector

컴포넌트 안에서 element를 선택할 수 있다.
aaaaa는 styled component 안에 있지 않다. Box 컴포넌트 안에서 span을 써서 Box안의 span을 선택할 수 있다.
그리고 state selector로서 &로 element의 이름을 쓰지않고 선택할 수 있다.

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

컴포넌트 안의 element를 선택할 때 tag이름에 의존하지 않고싶다면 다음과 같이 한다.

const Emoji = styled.span`
  font-size: 40px;
`;
const Box = styled.div`
	background-color: tomato;
	width: 100px;
	height: 100px;
	distplay: flex;
	justify-content: center
	align-items: center;
	animation:${rotationAnimation} 1s linear infinite;
	${Emoji} {
		font-size: 36px;
		&:hover {
			font-size: 400px;
		}
	}
`;
function App(){
  return (
    <Wrapper>
    	<Box>
    		<Emoji>aaaaa</Emoji>
    	</Box>
    <Wrapper />
  );
}