styled-components

💅🏽 styled-components

실수로 여러 파일에서 같은 클래스명을 이용해 클래스명이 겹치게 되면 스타일이 충돌하는 문제가 발생할 수 있다.
이러한 문제를 신경쓰지 않고 스타일을 적용시킬 수 있는 방법 중 하나가 styled-components이다.

https://styled-components.com/

장점

모든 구성 요소마다 고유한 클래스명을 랜덤하게 생성해주기 때문에 클래스명이 겹칠 걱정이 없다.
(+ 클래스명 짓느라 고생 안해도 된다!)
태그를 css로 정할 수 있다.

특징

파일 형식이 js 혹은 jsx이다.
(자바스크립트로 작성하는 css이기 때문.)

주의사항

⭐️ 스타일 구성 요소의 순서를 잘 정해야 한다.

-> 나중에 타겟이 될 것을 먼저 선언하기
ex) container 안에 button과 span에 관한 style이 있으면, container를 선언하기 전에 button과 span을 먼저 선언해주어야 나중에 container에서 button과 span을 쓸 때 잘 인식된다.

라이브러리 설치

yarn add styled-components

사용 방식

1. 파일형식을 js 나 jsx로 설정한다.
   파일명.styles.jsx

2. 상단에 styled를 import 한다.

import styled from "styled-components";

3. component 만들듯이 만들어서 export한다.
   명명규칙도 React component 명명규칙에 따른다.

예시

styled.태그명'내용'

백틱기호 사용.
ex. styled.buttonmargin:0

import styled from "styled-components";

export const NavigationContainer = styled.div`
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
`;

예시

styled(태그외요소)'내용'

Link 같은 것도 꾸밀 수 있다.
. 대신 ( ) 사용하는 것 유의하기.
ex. styled(Link)margin:0

import styled from "styled-components";
import { Link } from "react-router-dom"; // 사용하기 위해 import

export const LogoContainer = styled(Link)`
  height: 100%;
  width: 70px;
  padding: 25px;
`;

4. 스타일 적용할 곳에 import 해서 사용하기

import { NavigationContainer, LogoContainer} from "./navigation.styles.jsx";

<NavigationContainer>
   <LogoContainer to='/'>
     <CrwnLogo className="logo" />
   </LogoContainer>
<NavigationContainer/>

활용

스타일은 유지하고 태그만 바꾸고 싶을 때

as = '태그명'

as 속성을 이용해 태그를 바꿀 수 있다.

import { NavigationContainer } from "./navigation.styles.jsx";

<NavigationContainer as='span'> // div -> span 으로 바꿀 수 있음.
   <LogoContainer to='/'>
     <CrwnLogo className="logo" />
   </LogoContainer>
<NavigationContainer/>

공통된 스타일을 물려받고 싶을 때

styled(물려받을 컴포넌트)'내용'

import styled from "styled-components";

export const BaseBtn = styled.button`
  min-width: 165px;
  width: auto;
  height: 50px;
  letter-spacing: 0.5px;
  line-height: 50px;
  padding: 0 35px 0 35px;
`;

export const GoogleSignInBtn = styled(BaseBtn)` // Button 기본 스타일 물려받기
  background-color: #4285f4;
  color: white;

  &:hover {
    background-color: #357ae8;
    border: none;
  }
`;

SVG 파일 다루는 법

svg를 import해와서 소괄호 안에 넣어쓰기

styled(svg명)'내용'

import styled from "styled-components";
import { ReactComponent as ShoppingSvg } from "../../assets/shopping-bag.svg";

export const ShoppingIcon = styled(ShoppingSvg)`
  width: 24px;
  height: 24px;
`;

props 받아와서 쓰는 법

props로 imageUrl 전달받음.

 <div className="background-image" imageUrl={imageUrl} />

background image의 url로 넣어줌.

import styled from "styled-components";

export const BackgroundImage = styled.div`
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: ${({ imageUrl }) => `url(${imageUrl})`};
`;

CSS 캡슐화

css를 캡슐화 하여 변수로 사용할 수 있다.

import { css } from "styled-components";

예시

import styled, { css } from "styled-components";

const subColor = "grey";
const mainColor = "black";

// css 캡슐화
const shrinkLabel = css`
  top: -14px;
  font-size: 12px;
  color: ${mainColor};
`;

export const FormInputLabel = styled.label`
  color: ${subColor};
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 300ms ease all;

  ${({ shrink }) => shrink && shrinkLabel} // 사용
`;

이미지 적용하기
https://velog.io/@shinwonse/React-styled-components%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80