Styled-Components

최현호·2022년 6월 8일

React

목록 보기

26/27

Styled-Components

styled components 는 javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크입니다.

사용하는 이유

component 단위 스타일링
기존의 className을 사용하지 않는 것과 컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있습니다.

설치

// styled-components 설치하기
$ npm install --save styled-components
// yarn을 사용한다면
$ yarn add styled-components

사용 예시

const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

return <StyledDiv></StyledDiv>

.js

import styled from "styled-components";
...
const CustomDiv = styled.div`
  ...
`;

조건부 스타일링

 const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
    ${({ login }) => {
      return login ? `display: none` : null;
    }}
  `;

 return <StyledDiv login={true}></StyledDiv>;

Component의 props를 전달받아 사용하는 것이 가능 합니다.
템플릿 리터럴 내에서 javascript를 사용하는 것과 같은 형식이며,
내부에서 선언된 함수는 props를 파라미터로 실행 됩니다.

확장 스타일링

const Container = styled.div`
    max-width: 600px;
    width: 100%;
    height: 100px;
  `;

const BlackContainer = styled(Container)`
    background-color: black;
  `;

const RedContainer = styled(Container)`
    background-color: red;
  `;

return (
    <>
      <BlackContainer />
      <RedContainer />
    </>
  );

중첩 스코프

const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
    p {
      color: white;
    }
  `;

  return (
    <>
      <StyledDiv>
        <p>Title</p>
      </StyledDiv>
      <p>content</p>
    </>
  );

연습

App.js

import "./styles.css";
import styled from "styled-components";

import Container from "./Container";
import Button from "./Button";

const ContainerStyle = styled.div`
  margin: 20px;
  padding: 20px;
  background-color: #bdc3c7;
`;

const Custom = styled.h6`
  color: red;
`;

export default function App() {
  return (
    <ContainerStyle>
      <h2>hello</h2>
      <Custom>
        <Container />
      </Custom>
      <Button />
    </ContainerStyle>
  );
}

Container.js

const Container = () => {
  return <h2>My name is Hello</h2>;
};

export default Container;

Button.js

import styled from "styled-components";

const ButtonStyle = styled.button`
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const Button = () => {
  return (
    <ButtonStyle>
      <button>normal</button>
    </ButtonStyle>
  );
};

export default Button;