styled-components 설치 및 사용

styled-component

vscode-styled-components

익스텐션다운로드

npm install styled-components

터미널 입력

import styled from "styled-components";
function App() {
  const Father = styled.div`
    display: flex;
  `;
  const Boxone = styled.div`
    background-color: teal;
    width: 100px;
    height: 100px;
  `;
  const Boxtwo = styled.div`
    background-color: tomato;
    width: 100px;
    height: 100px;
  `;
  return (
    <Father>
      <Boxone></Boxone>
      <Boxtwo></Boxtwo>
    </Father>
  );
}

 

styled-component를 이용해 컴포넌트를 생성해 css를 꾸밀 수 있다. 하지만 위처럼 코드를 작성할 경우 중복되는 값은 복붙으로 입력해야 한다.

import styled from "styled-components";
function App() {
  const Father = styled.div`
    display: flex;
  `;
  const Box = styled.div`
    background-color: ${(props) => props.bgColor};
    width: 100px;
    height: 100px;
  `;
  const CIrcle = styled(Box)`
    border-radius: 50%;
  `;

  return (
    <Father>
      <Box bgColor="teal"></Box>
      <CIrcle bgColor="tomato"></CIrcle>
    </Father>
  );
}

 

const 새로운컴포넌트명 = styled(기존컴포넌트명)`   border-radius: 50%;
`;

 

이 처럼 작성하면 styled-component를 확장성 있게 사용할 수 있다.

as를 이용한 태그 변화

  const Father = styled.div`
    display: flex;
  `;

 

div태그를 가진 Father스타일 컴포넌트를

    <Father as="header">
    </Father>

 

as속성을 이용해 바꿀 수 있다

attrs를 이용한 attribute 적용

 const Input = styled.input.attrs({ required: true, minLength: "10" })`
    background: tomato;
  `;

 

styled.component로 react animation주기

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

function App() {
  const Wrapper = styled.div`
    display: flex;
  `;
  const rotationAnimation = keyframes`
  from{
transform: rotate(0deg);
border-radius: 0;
  }
  to{
transform: rotate(360deg);
border-radius: 100px;
  }
  `;
  const Box = styled.div`
    width: 200px;
    height: 200px;
    background: tomato;
    animation: ${rotationAnimation} 1s linear infinite;
  `;
  return (
    <Wrapper>
      <Box></Box>
    </Wrapper>
  );
}

export default App;

 

from to로 animation을 줄 수 있고 반드시

keyframes

를 import 해야 한다

sass처럼 하위태그에 속성주기, Pseudo selector 주는 법

    <Box>
        <span>😊</span>
      </Box>

 

styled-component로 만든 컴포넌트 안에 일반 태그도 넣을 수 있다.

  const Box = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background: tomato;
    animation: ${rotationAnimation} 1s linear infinite;
    span {
      font-size: 36px;
      &:hover {
        font-size: 72px;
      }
      &:active {
        opacity: 0;
      }
    }

 

사스처럼 css값에 바로 적어서 중괄호로 닫으면 scss처럼 css적용이 가능하다 또한 sass에서 현재 태그 자신을 나타낼 때 쓰는 엠버센드(&) 기호를 쓰는 것도 가능하다.

  const Wrapper = styled.div`
    display: flex;
    justify-content: center;
  `;
  const rotationAnimation = keyframes`
  0%{
transform: rotate(0deg);
border-radius: 0;
  }
  50%{
transform: rotate(360deg);
border-radius: 100px;
  }
  100%{
    transform: rotate(360deg);
border-radius: 0;
  }
  `;
  const Box = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background: tomato;
    animation: ${rotationAnimation} 1s linear infinite;
    ${Emoji} {
      &:hover {
        font-size: 96px;
      }
      &:active {
        opacity: 0;
      }
    }

 

안에 컴포넌트를 넣을 수도 있다. 이런 방식으로 입력하면 태그에 관계없이 적용시킬 수 있고 적용시키고 싶은 컴포넌트에만 타기팅할 수 있다.

ThemeProvider를 이용한 dark mode , light mode 다크모드 구현하기

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import { ThemeProvider } from "styled-components";
const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};
const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ThemeProvider theme={lightTheme}>
    <App />
  </ThemeProvider>
);

 

index.js에 ThemeProvider import 하고 App(app.js)를 감싸야한다.

darkTheme와 lightTheme 각각 변수를 object형태로 선언을 하고 키값은 반드시 동일해야 한다.

function App() {
  const Wrapper = styled.div`
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    background-color: ${(props) => props.theme.backgroundColor};
  `;
  const Title = styled.h1`
    color: ${(props) => props.theme.textColor};
  `;
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

export default App;

 

화면 넓이만큼 지정한 Wrapper 컴포넌트에는 props로 배경을

안에 글자인 Title컴포넌트에는 props로 모드의 텍스트컬러를 반영한다