styled-component

스타일 컴포넌트 사용하기

$ yarn add styled-component

$ npm i styled-components

기본적인 사용 예

import { styled } from "styled-components";

const App = () => {
 return (
   <DivBox>
   </DivBox>
 );
};

export default App;

const DivBox = styled.div`
 width: 500px;
 height: 500px;
 background-color: black;
`

확장

import { styled } from "styled-components";
import { Link } from "react-router-dom";

const App = () => {
 return (
   <DivBox>
     <SmallDivBox>
       <HomeLink to={"/"}>Home</HomeLink>
     </SmallDivBox>
   </DivBox>
 );
};

export default App;

const DivBox = styled.div`
 width: 500px;
 height: 500px;
 background-color: black;
`
const HomeLink = styled(Link)`
 text-decoration: none;
 color: #000000;
`
const SmallDivBox = styled(DivBox)`
width: 250px;
height: 250px;
`

props 선택 옵션 넣기

import { styled } from "styled-components";

const App = () => {
 return (
   <DivBox>
     <BigDivBox widthSize={"500px"} heightSize={"500"} bgColor={"#000000"}>
     </BigDivBox>
     <SmallDivBox widthSize={"500px"} heightSize={"500"} bgColor={"#777777"}>
     </SmallDivBox>
   </DivBox>
 );
};

export default App;

const DivBox = styled.div`
 ${(props) => `
 width: ${props.widthSize}; 
 height: ${props.heightSize}px;
 `
 //width와 height는 어디서 단위를 주는지 다른 경우이다.
 
 background-color: $(({bgColor}) => {bgColor});
`
 //구조분해 할당으로 작성가능

같은 스타일로 태그만 간단하게 바꾸기

import { styled } from "styled-components";

const App = () => {
 return (
   <DivBox>
     <label>제목</label>
     <Input/>
     <label>내용</label>
     <Input as="textarea"/>
   </DivBox>
 );
};

export default App;

const Input = styled.input`
 너무 이쁜 input
`

hover, child 적용하기

import { styled } from "styled-components";

const App = () => {
 return (
   <DivBox>
     <Button>완료</Button>
     <Button>수정</Button>
     <Button>삭제</Button>
     <Button>취소</Button>
   </DivBox>
 );
};

export default App;

const Button = styled.button`
 &:hover {
 cursor: pointer;
 }
`
const DivBox = styled.div`
 &:first-child{
 background-color: red;
 }
 `