Styled-Components는 CSS-in-JS 방식의 스타일 라이브러리로 스타일이 전역으로 중첩되지 않고 하나의 컴포넌트 내에서 CSS까지 관리할 수 있다는 장점이 있다. Styled-Components 를 대체할 수 있는 라이브러리로는 emotion이 있는데, 작동방식은 styled-components와 유사하다.
설치하기
npm i styled-components
- vscode-styled-components 을 같이 설치해주면 좋다.
vscode에서 css 속성 부분의 색상을 구분시켜 주는데 도움을 주는 익스텐션이다.
스타일리된 엘리먼트 만들기
컴포넌트 파일의 상단에서 styled를 불러오고, styled. 태그명을 사용하여 구현합니다.
import styled from 'styeld-components';
const MyComponent = styled.div`
font-size: 2rem;
`styled.div 뒤에 tagged 템플릿 리터럴 문법을 통해 스타일을 넣어주면, 해당 스타일이 적용된 리액트 컴포넌트가 생성된다. div가 아닌 button이나 input에 스타일링을 하고 싶다면 styled.button 혹은 styled.input 같은 형태로 뒤에 태그명을 넣어 주면 된다.
사용해야 할 태그명이 유동적이거나 특정 컴포넌트 자체에 스타일링 하고 싶다면, 다음과 같은 형태도 가능하다.
// 태그의 타비을 styled 함수의 인자로 전달
const MyInput = styled('input')`
background: gray;
`
// 아예 컴포넌트 형식의 값을 넣어 줌
const StyledLink = styled(Component)`
color: blue;
`스타일에서 props 조회하기
const Box = styled.div`
/* props로 넣어 준 값을 직접 전달해 줄 수 있다. */
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
`;이 코드는 background 값에 props를 조회해서 props.color의 값을 사용하게 했다.
그리고 color 값이 주어지지 않았을 때는 blue를 기본 색상으로 설정했다.
이렇게 만들어진 코드는 JSX에서 사용될 때 다음과 같이 color 값을 props로 넣어 줄 수 있다.
...
<Box color="black">(...)</Box>
...props에 따른 조건부 스타일링
import React from 'react';
import styled, { css } from 'styled-components';
const Box = styled,div`
/* props로 넣어 준 값을 직접 전달해 줄 수 있다. */
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
`;
const Button = styled.button`
background: white;
color: black;
border-radius: 4px;
padding: 0.5rem;
display: 0.5rem;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 1rem;
font-weight: 600;
/* & 문자를 사용하여 Sass처럼 자기 자신 선택 가능 */
&:hover {
background: rgba(255, 255, 255, 0.9);
}
/* 다음 코드는 inverted 값이 true일 때 특정 스타일을 부여해 준다. */
${props =>
props.inverted &&
css`
background: none;
border: 2px solid white;
color: white;
&:hover {
background: white;
color: black;
}
`
};
& + button {
margin-left: 1rem;
}
`;
const StyledComponent = () => (
<Box color='black'>
<Button>안녕하세요</Button>
<Button inverted={true}>테두리만</Button>
</Box>
);
export default StyledComponent;일반 CSS 방식에서는 className을 이용하여 조건부 스타일링을 하지만
Styled-Components에서는 props를 이용하여 styled-component를 할 수 있다.
컴포넌트의 props는 다음과 같은 방식으로 넣을 수 있다.
...
<Button inverted={true}>테두리안</Button>
...여러줄의 스타일을 props 구문에 적용할 때는 태그드 템플릿 리터럴을 적용하여 작성하면 된다.
이 때, css 모듈을 사용하지 않고 템플릿 리터럴만 사용해도 작동은 되나 vscode의 신택스 하이라이팅이 적용이 안되는 단점이 있기 때문에 되도록 css를 붙여서 작성하는것이 권장된다.
...
${props =>
props.inverted &&
css`
background: none;
border: 2px solid white;
color: white;
&:hover {
background: white;
color: black;
}
`
};
...반응형 디자인
스타일에 @media 방식으로 반응형 쿼리가 작성 가능하다
const Box = styled.div`
/* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
/* 기본적으로는 가로 크기 1024px에 가운데 정렬을 하고
가로 크기가 작아짐에 따라 크기를 줄이고
768px 미만이 되면 꽉 채웁니다. */
width: 1024px;
margin: 0 auto;
@media (max-width: 1024px) {
width: 768px;
}
@media (max-width: 768px) {
width: 100%;
}
`;
