CSS : styled-components (스타일드 컴포넌트)

 

스타일드 컴포넌트(Styled Components)는 리액트(React) 애플리케이션에서 사용되는 자바스크립트 라이브러리 중 하나로, 컴포넌트 기반 스타일링을 위한 솔루션 중 하나. 스타일드 컴포넌트를 사용하면 자바스크립트 파일 안에서 컴포넌트와 함께 스타일을 정의할 수 있다.

 

1. 설치

npm install styled-components
yarn add styled-components

 

2. 사용

- 기본 스타일드 컴포넌트 작성

<StSpan>헬로우</StSpan> 
//스타일컴포넌트라는 표시로 St + 명명

const Span = styled.span`
	//백틱 안에 CSS를 작성
` 

<StForm>헬로우</StForm>
//form 태그와 같이 특수한 태그의 경우, 기능을 잃어버릴 수도 있음 
<StForm as="form"/> 
//그때는 이렇게 속성을 다시 넣어주기

 

- 조건부 스타일링

부모 컴포넌트에서 보낸 props를 받아 사용할 수 있다.

// src/App.js

import React from "react";
import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

const App = () => {
  return (
    <div>
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

 

해당 코드는 구버전에서 사용이 가능했지만, 최신 버전에서는 저렇게 props를 내려주면 다음과 같은 에러가 찍힌다.

 

Warning: React does not recognize the `borderColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bordercolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

​

=> 해당 prop을 스타일드 컴포넌트 내부에서만 사용하고 HTML 요소에 전달되지 않도록 해야된다.

=> $ 접두사를 활용하자!

 

      <StBox $borderColor="red">빨간 박스</StBox>
      <StBox $borderColor="green">초록 박스</StBox>
      <StBox $borderColor="blue">파랑 박스</StBox>

 

새로고침하면 해당 오류가 더 이상 뜨지 않는다!

​

$ 접두사를 사용해 "transient" props로 내려주면 스타일링에만 적용되고 DOM으로 불필요한 속성이 전달되지 않는다.

• 해당 props가 스타일링을 위한 코드라는 것을 알수있음 (가독성 up)
• 불필요한 속성이 전달되지 않아 성능 최적화
• 브라우저 지원하는 속성과의 코드 충돌을 방지할 수 있음

- 전역 스타일링

모든 HTML요소가 공통된 스타일을 갖는 것을 말한다. 전역 스타일은 사용자가 개별 블록이나 페이지를 편집하지 않고도 전체 사이트에서 전체 스타일을 변경할 수 있도록 만든 시스템 및 인터페이스이다. 사이트의 통일성을 위해 사용하는 것!

 

//전역스타일 컴포넌트를 만들고 최상위 컴포넌트에 추가해주면 하위 컴포넌트에 모두 적용된다.

import React from 'react';
import GlobalStyle from './theme/globalStyle';
import Content from './components/Content'; 
 
function App() {
  return (
    <>
      <GlobalStyle />
      <Content />
    </>
  );
}
 
export default App;

 

createGlobalStyle 임포트 하기. 여기서 지정한 css는 index.css 처럼 사용할 수 있다.

import { createGlobalStyle } from 'styled-components'; //임포트 해주기
 
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    background: teal;
    font-family: Open-Sans, Helvetica, Sans-Serif;
  }
`;
 
export default GlobalStyle;

 

- 확장된 문법

기본 css에서는 사용이 불가능했던 확장문법 등을 사용할 수 있다.

h1.header {
  font-weight: 700
}

h1 {
  &.header {
    font-weight: 700
  }
} //&을 통해 연결 가능

 

- ThemeProvider 로 공통 스타일 간편화

import { ThemeProvider } from "styled-components";

function App() {
  return (
    <ThemeProvider theme={Theme}>
      <GlobalStyle />
      <Router />
    </ThemeProvider>
  );

 

이렇게 상위 태그에서 감싸주면 된다.

const Colors = {
  gray1: "#CDCDCD",
  gray2: "#939393",
  gray3: "#737878",
  bg1: "#FCFCFB",
  bg2: "#E9F3F2",
  bg3: "#DCE7E7",
  foot: "#EAF0EF",
  blueGreen1: "#A7EFF0",
  blueGreen2: "#00A1A3",
  blueGreen3: "#19696A",
  blueGray1: "#F1F5F4",
  blueGray2: "#D6E6E5",
  blueGray3: "#4A6363",
};

const fontSizes = {
  xsm: calcRem(12),
  sm: calcRem(14),
  base: calcRem(16),
  lg: calcRem(18),
  xl: calcRem(20),
  xxl: calcRem(24),
};

export const theme = {
  Colors,
  fontSizes,
  fontWeights,
  paddings,
  margins,
};

 

위의 코드처럼 글꼴 크기라던가, 주요 색상등, 마진 값을 간편하게 뽑아 쓸 수 있다.

const StWrap = styled.div`
  background-color: ${(props) => props.theme.Colors.blueGray2};
  width: 100%;
`

- 같은 css 코드 재사용

className으로 css 클래스명을 적듯이 코드를 재사용할 수 있다.

import { css } from "styled-components";

/*정가운데 정렬 */
export const FlexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

/*반응형 맞춤*/
export const Container = css`
  width: 100%;
  position: absolute;
  overflow: auto;
  height: calc(100vh);
`;

const StTitle = styled.div`
  ${FlexCenter}; //필요할때마다 확장해가며 쓸 수 있다.
  font-size: ${(props) => props.theme.fontSizes.lg};
`

 

가끔 스타일드컴포넌트를 통해 스타일링한 경우, 다른 라이브러리 css들이랑 충돌이 나거나 로컬에서는 스타일링이 잘 먹히지만 배포하고 나면 스타일이 적용되지 않은 오류가 종종 발생할 수 있으니 항상 확인하자..^^