Styled-components 버튼만들기

전에 만들었던 버튼을 styled-components를 사용해서 제작한다.
Button.js

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

const StyledButton = styled.button`
    /*공통 스타일*/
    display: inline-flex;
    align-items: center;
    outline: none;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;


    /*크기*/
    height: 2.25rem;
    font-size: 1rem;

    /*색상 */
    background: #228be6;
    &:hover{
        background: #339af0;
    }
    &:active{
        background: #1c7ed6;
    }

    /*기타 */
    & + & {
        margin-left: 1rem;
    }
`
function Button({children,...rest}){
    return <StyledButton {...rest}>{children}</StyledButton>
}


export default Button;

App.js

import React from 'react';
import styled, {css} from 'styled-components';
import Button from './Button';

const AppBlock = styled.div`
  width: 512px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid black;
  padding: 1rem;

`
function App() {
  return(
   <AppBlock>
     <Button>BUTTON</Button>
   </AppBlock>
    
  ) 
}

export default App;