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처럼 보간법으로 사용할 수 있습니다.