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

import './Button.css';

// &: this
const Button = styled.button`
    font: inherit;
    padding: 0.5rem 1.5rem;
    border: 1px solid #8b005d;
    color: white;
    background: #8b005d;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
    cursor: pointer;

    &:focus {
        outline: none;
    }

    &:hover,
    &:active {
        background: #ac0e77;
        border-color: #ac0e77;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
    }
`;

// const Button = props => {
//   return (
//     <button type={props.type} className="button" onClick={props.onClick}>
//       {props.children}
//     </button>
//   );
// };

export default Button;



이 소스에서 아래 주석된 버튼 보면 이벤트랑 텍스트 출력하는게 있고 styled component에는 props 받는게 없는데도 텍스트랑 이벤트 잘 먹히는데 


이건 자동으로 맵핑 시켜줘서 그런거임?