Styled Components 란?
설치
$ npm install --save styled-components
사용법 (methods)
import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
class App extends Component {
render() {
return (
<Fragment>
<Button>Hello</Button>
<Button danger>Hello</Button>
</Fragment>
)
}
}
const Button = styled.button`
border-radius: 50px;
padding: 5px;
min-width: 120px;
color: white;
font-weight: 600;
-webkit-appearance: none;
cursor: pointer;
&:active,
&:focus {
outline: none;
}
background-color: ${props => (props.danger ? 'red' : 'purple')}
`;
export default App;
styled 객체 안에 'styled-components'를 import 해주고, Button 변수에 styled.button 방식으로 html button 태그를 css와 함께 담아준다.
마지막에 background-color를 보면 props에 체크해서 red
혹은 purple
로 지정할 수도 있다.
예를 들어 body태그의 margin, padding을 없애고 싶을때는 styled-components
의 createGlobalStyle
메소드를 사용하면 된다.
---생략---
import styled, { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
padding: 0;
margin: 0;
}
`;
---생략---
<React.Fragment>
<GlobalStyle> // <-- 추가
<Button>Hello</Button>
<Button danger>Hello</Button>
</React.Fragment>
createGlobalStyle
메소드를 import 하고, GlobalStyle 변수 안에 body의 style을 정의해주고 랜더링 부분에 추가해주면 된다.
withComponent
메소드는 새로운 stylecomponent를 생성하고 다른 태그에 적용 시킨다.
예를들어 button 태그의 stylecomponent를 a 태그에 적용시키고 싶다면 아래와 같이 한다.
const Anchor = Button.withComponent('a');
css를 추가하고 싶다면 styled
메소드를 이용.
const Anchor = styled(Button.withComponent('a'))`
text-decoration: none;
`;
keyframes
=> animation을 위한 keyframes을 생성하는 메소드.
v4에서는 keyframes
을 쓰기 위해 css
헬퍼를 함께 써야한다.
keyframes 참고 시작 ==>
1. @keyframes
란?
@keyframes
는 css 문법중 하나로 애니메이션이 만들어지는 부분.@keyframes
를 타임라인 안의 하나의 스테이지(구간). @keyframes
안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있다.@keyframes
사용법?
애니메이션 스테이지들을 정의. @keyframes
속성들은~
- 우리가 정한 이름 ex) tutsFade
스테이지: 0~100%; from(0%) 그리고 to(100%)
CSS 스타일: 각 구간에 적용시킬 스타일
@keyframes tutsFade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
```css
.element {
animation: tutsFade 4s 1s infinite linear alternate;
}
```
keyframes 참고 끝==>
import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
---생략---
const Button = styled.button`
${props => {
if (props.danger) {
return css `animation: ${rotation} 2s linear infinite `;
}
}}
`;
const rotation = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`
props
로 style 을 변경할 수 있다.
<Button danger rotationTime={5}></Button>
const Button = styled.button`
---생략---
${props => {
if (props.danger) {
return css `animation: ${rotation} ${props.rotationTime}s linear infinite `;
}
}}
`;
Button
컴포넌트에 rotationTime
를 props
로 css 를 변경했다.