TIL #24 | Styled Components

kibi·2023년 11월 13일

TIL (Today I Learned)

목록 보기

23/83

Styled Components

확장 프로그램 설치
yarn add styled-components

CSS-in-JS 자바스크립트로 CSS 코드를 작성하는 방식

import styled from "styled-components";

const StBox = styled.div`
  // css 문법으로 작성
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px
`

조건부 스타일링 가능

import styled from "styled-components";

// styled-components를 사용하여 js로 css 문법 작성 가능 
const StBox = styled.div`
  // css 문법으로 작성
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px
`

// 배열에 사용할 색상 값 지정하기
const boxList = ["red", "blue", "green", "black"];

// color가 인자로 들어올 때마다 해당 값 리턴
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "blue":
      return "파란 박스";
    case "green":
      return "초록 박스";
    default:
      return "검정 박스";
  }
};

//
function App() {
  return (
    <StContainer>
      {boxList.map((box) => {
        return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
      })}
    </StContainer>
  );
}

전역 스타일링

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    body {
        font-family: "Helveica", "Arial", sans-serif;
        line-height: 1.5;
        font-size: 20px;
        font-weight: 600;
    }
`;

export default GlobalStyle;

import 해서 사용

최상위 컴포넌트 바로 아래에 추가

function App() {
  return (
    <StContainer>
      <GlobalStyle />
      {boxList.map((box) => {
        return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
      })}
    </StContainer>
  );
}