Styled-components Pseudo selectors 2

 

${styled-component명} {}

import React from 'react';
import styled from 'styled-components';
import { keyframes } from 'styled-components';

...

// ${styled-component명} {}
// 이런식으로 스타일 컴포넌트 안에서 셀렉해주면
// 그 컴포넌트가 어떤 태그이든 상관없이 css를 줄 수 있다.

const Emoji = styled.span`
  font-size: 36px;
`;

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: 100px;
    }
  }
`;

function App() {
  return (
    <Father>
      <Box>
        <Emoji>:)</Emoji>
      </Box>
    </Father>
  );
}

export default App;