styled component
본질적으로, Styled-component 는 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으면 javascript 코드 내에서 일반 css로 구성 요소의 스타일을 지정할 수 있다.
설치
npm install --save styled-components
import styled from 'styled-componets'
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
const {위에서 지정해준 component명} = styled.{태그명} ``;
render(
<div>
<Button>Normal</Button>
<Button width="100">Primary</Button>
</div>
);
const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${props => props.width < 200 ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
Sass에서 common.scss와 reset.scss 의 역할도 Styled Component에 존재한다 바로 Global Style이다.
color: ${(props) => props.theme.colors.grayColor};
출처