Styled-components - (1)설치 및 기본 문법

Apeachicetea·2021년 11월 23일
0

스타일컴포넌트

목록 보기
1/5

설치 및 불러오기

  • 설치

npm i styled-components

  • 불러오기

import styled from "styled-components";

styled component css 적용 시 자동완성 기능

vscode-styled-components 익스텐션 설치하기!

기본 문법

const 작명(첫글자는 대문자) = styled.원하는태그`CSS코드`
  • 예시

//App.js

import styled from "styled-components";

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;
`

const Text = styled.span`
  color: white;
  font-size: 30px;
`

function App() {
  return (
    <Father>
      <BoxOne>
        <Text>Hello World!</Text>  
      </BoxOne>
      <BoxTwo />
    </Father>
  );
}

export default App;


profile
웹 프론트엔드 개발자

0개의 댓글