이제 이 컴포넌트에 상단 여백을 넣어 보겠습니다. 상단 여백을 주는 방법은 두 가지입니다. 첫 번째 방법은 style props를 전달해 주는 것입니다.

components/auth/AuthForm.js - AuthForm

<Button cyan fullWidth style={{ marginTop: '1rem' }}>
로그인
</Button>

---

 

두 번째 방법은 styled 함수를 사용하여 새로운 컴포넌트 이름으로 정의하는 것입니다.

components/auth/AuthForm.js

(...)
const ButtonWithMarginTop = styled(Button)`
  margin-top: 1rem;
`;

const AuthForm = () => {
  return (
    <AuthFormBlock>
      <h3>로그인</h3>
      <form>
        <StyledInput autoComplete="username" name="username" placeholder="아이디" />
        <StyledInput 
          autoComplete="new-password" 
          name="password" 
          placeholder="비밀번호" 
          type="password" 
        />
        <ButtonWithMarginTop cyan fullWidth>
          로그인
        </ButtonWithMarginTop>
      </form>
      <Footer>
        <Link to="/register">회원가입</Link>
      </Footer>
    </AuthFormBlock>
  );
};

export default AuthForm;

---