인프런 커뮤니티 질문&답변

강좌에 나오는데 거기까지 안 보셨나요? 지금 어떻게 하셨나요?

const ButtonWrapper = styled.div`
    margin-top: 10px;
`;

<ButtonWrapper>
    <Button Type="primary" htmlType="submit" loading={false}>Log in</Button>
    <Link href="/signup"><a><Button>Sign In</Button></a></Link>
</ButtonWrapper>



이부분도 먹히지 않아서 어떻게 해야하는지 모르겠습니다 

  "dependencies": {
    "@ant-design/icons": "^4.6.4",
    "antd": "^4.16.13",
    "next": "^9.5.5",
    "prop": "^0.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.1",
    "types": "^0.1.1"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-react": "^7.25.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prop-types": "^15.7.2"
  }
}


이렇게 등록도 되어있는데 안돼고있습니다 

저렇게 ButtonWrapper를 만드는 건 기존 antd 컴포넌트 css를 수정하는 것과 아무런 관련이 없는데요? antd 컴포넌트를 div로 감싼 뒤 div에 margin-top을 준 것이죠.

버튼 자체에 margin-top을 주려면

const CustomButton = styled(Button)`
  margin-top: 10px;
`

한 뒤 Antd 버튼 대신 CustomButton을 쓰면 됩니다.