-2

I am using Ant Design in my React project but did not totally understand how it works. Does Ant Design have predefined classes like Bootstrap? For example, if I wanted to center elements in Bootstrap I would do something like that?

class="d-flex justify-content-center"
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
Alym Sagymbaev
  • 31
  • 2
  • 5

2 Answers2

2

Yes Antd have predefined classes like bootstrap

If you want to center element use justify="center" It will work only on Row

but you can customize the antd element by using @emotion/styled package.

You need to inspect the button and get the button class from the element tab

enter image description here

Now you need to create a custom style for the button

Step 1: you need to import @emotion/styled

import Styled from "@emotion/styled";

Step 2 : Now Override the CSS of the Button

const CustomButton = Styled(Button)`
.ant-btn-primary{
 background-color: #4BA461;
}
`

Step 3 Now use this CustomButton where you want like

 <CustomButton>Register</CustomButton>

Installation Process

npm install --save @emotion/styled

 or

yarn add @emotion/styled

You can learn more about emotion/styled from https://emotion.sh/docs/install

Force Bolt
  • 1,117
  • 9
  • 9
0

Yes, here in Ant Design CSS properties are applied in attributes like center='sm' and In bootstrap, CSS properties are applied in classes like justify-content-sm-center.

please follow this URL https://ant.design/components/grid/#API

Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
  • don't forget to consider up-vote and check this answer as the best answer for you by clicking on the right arrow, thanks! – Nisharg Shah Mar 10 '20 at 13:55