styled-components

컴포넌트 별로 css를 적용시키고 다른 css에 영향을 주지 않기 위해 사용

https://styled-components.com/

import styled from "styled-components";

// const Button = props => { 원래 이랬던 버튼 함수
//   return (
//     <button type={props.type} className="button" onClick={props.onClick}>
//       {props.children}
//     </button>
//   );
// };
이렇게 되어버렸다.

styled.htmltag`` 이런 방식으로 작성하는 것 같다


const Button = styled.button`
	width: 100%;
    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, hover 등은 &:하고 뒤에 붙히고 작성한다.
    
    @media (min-width: 768px) {
    width: auto;
  }
  미디어 쿼리 작성도 가능하다
    
  &:focus {
    outline: none;
  }
	
  &:hover,
  &:active {
    background: ${props => props.invalid ? '#fad0ec' : 'transparent'};
    이렇게 동적으로 스타일을 바꿀수도 있다.
    물론 props가 있어야 가능
    <Button invalid={ture}/> 이런 방식으로
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
  
`



export default Button;

그러나 아직 이게 어떻게 버튼 기능이 그대로 유지되는지는 알지 못했다.