Ant Design Plugin for Graze

This package is a plugin for Graze that integrates Ant Design with a support for a custom theme.

Server-side Rendering Support

The plugin will automatically generate your theme's CSS on the server. CSS is optimized for the generated markup using dropcss CSS cleaner.

Usage

Install the plugin using yarn:

$ yarn add graze-plugin-antd

or using npm:

$ npm install --save graze-plugin-antd

In graze.config.js:

export const plugins = [
  require('graze-plugin-antd')({})
]

With custom theme

Pass a theme property to the plugin options that requires your less theme file in graze.config.js:

export const plugins = [
  require('graze-plugin-antd')({
    theme: () => require('./src/my-theme.less')
  })
]

You'll need to add support for less files - install razzle-plugin-less:

$ yarn add razzle-plugin-less

Add less plugin to razzle.config.js:

module.exports = {
  plugins: [
    {
      name: 'less',
      options: {
        less: {
          javascriptEnabled: true,
        }
      }
    }
  ]
}

Now make sure to @import the antd.less file and override any of the default variables in src/my-theme.less:

@import "~antd/dist/antd.less"; // Load antd default styles

@primary-color: #6b48ff; // primary color for all components
@link-color: #6b48ff; // link color
@success-color: #e21134; // success state color
@warning-color: #faad14; // warning state color
@error-color: #ff501b; // error state color