Styled-components Pseudo selectors 2
2022. 3. 29. 23:49ㆍ코딩공부/React
${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;
'코딩공부 > React' 카테고리의 다른 글
code splitting / 번들링 (0) | 2022.04.13 |
---|---|
REDUX란? (0) | 2022.04.13 |
왜 Styled-components를 쓰는가? (0) | 2022.03.29 |
Styled-components Pseudo selectors (0) | 2022.03.29 |
Styled-components Animation (0) | 2022.03.29 |