styled-components
는 CSS-in-JS
라이브러리로, 이를 통해 자바스크립트로 작성된 파일에 스타일을 정의할 수 있게 해줍니다. React
프레임워크에서 사용되는 라이브러리입니다. npm
을 통해 손쉽게 설치가 가능합니다.
$ npm i styled-component
HTML
엘러먼트를 스타일링 할때나 component
를 스타일링 할때 다르게 정의하게 됩니다.
HTML
import styled from "styled-components"
const StyledButton = styled.button`
스타일 내용
`;
Component
import styled from "styled-components"
import Button from "./Button"
styled(Button)`
`;
props
의 활용일반적인 css
처럼 width: 100
, color: blue
만 사용할수도 있지만 props
를 통해 스타일링을 해야 제대로 styled-components
를 사용했다 할 수 있습니다.
import styled from "styled-components"
render = (
<>
<StyledButton color="blue"></StyledButton>
</>
)
const StyledButton = styled.button`
width: 100;
height: 50;
background = ${(props) => props.background || "white" }
color = ${(props) => props.color || "red"}
`;
위 처럼 or
연산자를 사용할수 있으며 삼항연산자도 가능합니다.