npm install styled-components@5.3.10
설치!

import React from "react";

function Button(props) {

  return <Button onClick={props.onClick}>{props.content}</Button>;
}

export default Button;

props를 주기위해 버튼 컴포넌트 만들기

     <Button content="첫번째 버튼" onClick={myName} bgcolor="#000000"></Button>
     <Button content="두번째 버튼" onClick={myNam} bgcolor="green"></Button>

검은색과 초록색 버튼을 만들었다.

import styled from "styled-components";

styled-components 임포트 해주고

  const Button = styled.div`

  `;

백탁 사이에 코드를 작성해주면 된다.

hover

    &:hover {
      background-color: skyblue;
    }

첫번째 버튼에 마우스를 갖다대면 하늘색이 되게했다.

active

    &:active {
      background-color: pink;
    }

첫번째 버튼을 클릭하면 핑크색으로 바뀌게 했다.




버튼 컴포넌트 전체 코드

import React from "react";
import styled from "styled-components";

function Button(props) {
  const Button = styled.div`
    &:hover {
      background-color: skyblue;
    }

    &:active {
      background-color: pink;
    }

    background-color: ${props.bgcolor};
    cursor: "pointer";
  `;

  return <Button onClick={props.onClick}>{props.content}</Button>;
}

export default Button;