[React] Styling (CSS Module, styled-components)

이애진·2022년 7월 19일

React

목록 보기

3/28

1. 배경

컴포넌트를 스타일링 할 때는 다양한 방식이 있음

일반 CSS
CSS Module
styled-components
Sass
그 외

2. CSS Module

CSS를 불러와서 사용할 때 클래스 이름을 [파일이름]_[클래스 이름]_[해쉬 값] 형태로 자동 만들어주어 각각의 컴포넌트의 클래스 이름이 중첩되는 현상을 방지해주며 일반 CSS와 동일하게 사용할 수 있고 확장자는 .module.css로 사용한다

/* example.module.css */
.wrapper {
  background: #000000;
  padding: 10px;
  color: #ffffff;
  font-size: 20px;
}

/* 부득이한 경우 global하고 사용하고 싶다면  */
:global .something {
  font-weight: 800;
  color: aqua;
}

주의해야할 점은 부모 컴포넌트에서 참조한 모듈 css는 자식 컴포넌트에서 사용하는 모듈 css와 이름이 겹치면 안된다

3. styled-components

css 파일을 따로 만들 필요 없이 javascript 파일로 스타일까지 작성할 수 있다

3-1) 선행 설치

npm i styled-components
npm i -D @types/styled-components

3-2) Example 1

const Box = styled.div<{ color?: string }>`
  background-color: ${props => props.color || "blue"};
  width: 100px;
  height: 100px;
`

const StyledComponent = () => {
  return (
    <Box color="black" />
  );
};

props로 전달해 주는 값으로 쉽게 스타일링을 적용할 수 있다

3-3) Example 2

const Box = styled.div<{ color?: string }>`
  background-color: ${props => props.color || "blue"};
  width: 100px;
  height: 100px;
  display: block;
`

const CoralContainer = styled(Box)`
  background-color: coral;
`;

const StyledComponent = () => {
  return (
    <>
      <CoralContainer />
      
      {/*  Box styled-component를 그대로 쓰고 싶지만 태그 type이 div 아닌 a를 쓰고 싶을 때 as 를 사용해서 바꿀 수 있다 */}
      <Box as={"a"} href={"/yeah"}></Box>
    </>
  );
};