styled-components에서 mixins 사용하기

styled-components에서 겹치는 스타일을 Sass처럼 믹스인으로 만들 수 있을까?

import styled, {css} from '@emotion/styeld';

const Button= Styled.button`
  color: white;
  background-color: black;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
`;

const hover= css`
  &:hover {
    background-color: skyblue;
  }
`;

const PinkButton= Styled(Button)`
  background-color: pink;
  ${hover}
`;

const GreenButton= Styled(Button)`
    background-color: green;
    ${hover}
`;

• 가능합니다!

• 위 코드는 css를 styled-components에서 import해 hover라는 믹스인을 구현했습니다!

• 구현한 믹스인은 Sass처럼 보간법으로 사용할 수 있습니다.