Usage - HelpfulHuman/ant-design GitHub Wiki

When importing a component for use in your project, it's recommended to manually import the specific component you need.

import Button from 'antd/lib/button';

This will improve network performance since it wont import all components, which is possible with...

import { Button } from 'antd';

Styling can be accomplished in several ways, depending on whether you wish to build upon the existing styles or start from scratch.

Going with our button example...

import 'antd/lib/button/style/css';

...will import the specific styles for the button provided by Ant Design.

By default the components will have a set className-space...

For example:

<Button size={'small'} type="primary">Primary</Button>

looks like...

<button type="button" class="ant-btn ant-btn-primary ant-btn-sm"> <span>Primary</span> </button>

The button's classes are prefixed with ant-btn. Note the class modifiers in this example. They are tied to the provided props. For instance, type={'primary'} results in ant-btn-primary as a modifier applied to the component.

In order to override the provided styles, you'll need to forego importing of the button's stylesheet.

The component can then be provided with the prefixCls property. This will replace the default className prefix with the one you wish to provide...

<Button prefixCls={'hh-btn'} size={'small'} type="primary">Primary</Button>

...looks like...

<button type="button" class="hh-btn hh-btn-primary hh-btn-sm"><span>Primary</span></button>

Now you can create your own custom stylesheet to work with.

.hh-button {

color: #fff
background: green

&.hh-button-primary {
    background: blue
}

&.hh-button-danger {
    background: red

}
&:hover {
    background: yellow;
}

}

It should also be noted that there may be some underlying default/reset styles applied through the stylesheets provided by Antd, which you could preserve by leaving the style sheet included and just working within your provided class name-space.

You can also import all the styles by adding import 'antd/dist/antd.css'; to App.js

In order for smoother development down the road, it may be advantageous to abstract some of the particulars of the custom styling away. For example...

import Button from 'antd/lib/button';

export default class HHButton extends React.Component {

`... particulars `

`render() {`
    `return <Button prefixCls={'hh-btn'} ...etc >Primary</Button>`
`}`

}

However, this may be more practical for the development of additional, missing, or custom components.