Styled Components를 사용하면 Sass를 따로 설치하지 않고도 사용할 수 있고
클래스명 없이도 스타일을 작업할 수 있다.
설치 : npm install --save styled-components
import React, { Component, Fragment } from "react";
import styled, { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
body {
padding: 50px;
margin: 0;
background: pink;
}
`;
class App extends Component {
render() {
return (
<Fragment>
<GlobalStyle />
<Button>Hello</Button>
<Button danger>Hello</Button>
<Anchor href="http://google.com">go to Google</Anchor>
</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 ? "#ff6b6b" : "#1dd1a1")};
`;
const Anchor = styled(Button.withComponent("a"))`
text-decoration: none;
`;
export default App;
import styled from 'styled-components'; 를 import 해주고 Button이라는 변수에 styled를 쓰고
그 뒤에 .html 태그를 붙인다. style.<html tag>
그리고 백틱안에 스타일을 작성해주면 된다. props로 스타일을 변경할 수도 있다.
body에 들어간 padding, margin 등은 createGlobalStyle을 import 하여서 스타일을 줄 수 있다.
따로 컴포넌트를 만들지 않아도 된다.
위에 코드처럼 Anchor라는 컴포넌트에 Button 컴포넌트의 스타일을 재사용하고 싶다면
withComponent를 사용하여 위와 같이 사용할 수 있고 css를 따로 추가하고 싶다면
뒤에 백틱을 넣어서 추가해주면 된다.
반응형
'React' 카테고리의 다른 글
| smart component, dumb component (0) | 2019.12.02 |
|---|
