Styled Component 정리하기

기본적인 사용법

import React from "react";
import exampleImg from "../assets/example.png";
//import "./picture.scss";
import styled from 'styled-components'

const Picture = () => {
  console.log("Helloo wrolld");
  return (
    <Container onClick={()=>{}}>
      <ImgBox>
        <Img src={exampleImg} />
      </ImgBox>
    </Container>
  );
};

const Container = styled.div`
  max-width: 16.666666666666%;
  max-height: 16.666666666666%;
  display: inline-block;
`;
const ImgBox = styled.div`
  background-color: rgb(243, 243, 243);
  transition: .3s;
  &:hover {
    scale: 140%;
  }
`; 
const Img = styled.img`
  max-width:100%;
`

export default Picture;

styled.###으로 html tag역할을 하는 컴포넌트를 만들어준다

상속

const LangeButton = styled(SimpleButton)`
	font-size: 50px;
`;

상속을 받으면 css스타일을 그대로 가져온다

컴포넌트에 스타일을 적용할때

props.className을 넣어줘야한다.

return (<Hello className={props.className}></Hello>)

props

프롭스 처리하는 법

const PrimaryButton = styled.button`
	color: ${props=>props.primary ? 'white' : 'black'}
    background-color: ${props=>props.primary ? 'blue' : 'gray'}