Right and Wrong way to use Ant Design with React.js

ant-design-react.md

References:

• https://ant.design/docs/react/customize-theme
• https://github.com/santospatrick/cra-antd-theme
• https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

A Simple Signin Form

Signin Form	Signin Form as components

1. Usage of <Button />

Bad:

import styled from 'styled-components';

const LoginButton = styled.button`
  background-color: #FF377B;
  width: 100%;
  font-family: Poppins;
`

function SigninForm() {
  return (
    <form>
      // ...
      <LoginButton />
    </form>
  )
}

Why is this a bad ❌ example?

1. Recreating an existing component Ant Design already implements.
2. Setting width: 100% in styles, but Ant Design's button already has a prop for that.
3. Setting font-family locally, instead of globally

---

Good:

// SigninForm.js
import { Button } from 'antd';

function SigninForm() {
  return (
    <form>
      // ...
      <Button block>Sign In</Button>
    </form>
  )
}

// theme.js
module.exports = {
  "@font-family": "Poppins",
  "@primary-color": "#FF377B"
}

Why is this a good 🥰 example?

1. Using Ant Design's <Button /> component
2. Using <Button /> prop block to fulfill needed width
3. Customizing all components primary color (#FF377B), not only <Button /> local styles
4. Setting variables in theme.js makes them reusable in all components, even third parties that sometimes we need.

signin-separate.png

signin.png