How to customize Ant.design styles

Ant Design (often abbreviated as AntD) is a widely used React component library that provides rich UI components to help developers quickly build visually consistent interfaces. In practice, we frequently need to customize styles based on the project's visual requirements. The following are several common methods for customizing AntD styles:

1. Using CSS Class Overriding

Each component in AntD has its own class name, typically prefixed with 'ant'. We can override default styles by adding custom CSS. This is the simplest and most direct approach.

Example: To change the background color and text color of a button (Button), we can do the following:

css
.ant-btn {
  background-color: #1DA57A;
  color: white;
}

2. Using the style Attribute

Most AntD components support the style attribute, enabling direct inline styling.

Example:

jsx
<Button style={{ backgroundColor: '#1DA57A', color: 'white' }}>Button</Button>

3. Modifying Less Variables

AntD uses Less as a CSS preprocessor. Its styles rely on numerous Less variables, and modifying these can change the theme globally.

You need to install and configure less and less-loader in your project, then adjust AntD's Less in the webpack configuration.

Example: In the webpack configuration file, modify Less variables as follows:

js
{
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: {
        'primary-color': '#1DA57A',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true,
    },
  },
}

4. Using Theming

AntD supports theme customization through configuration. We can tailor common variables using the theme property.

Example: Create a custom theme file theme.js:

js
module.exports = {
  'primary-color': '#1DA57A',
  // Other theme variables
};

Then integrate this theme file into the webpack configuration.

5. CSS in JS

For complex projects, CSS-in-JS libraries like styled-components or emotion can override AntD styles.

Example: Using styled-components to customize a button:

jsx
import styled from 'styled-components';
import { Button } from 'antd';

const StyledButton = styled(Button)`
  &&& {
    background-color: #1DA57A;
    color: white;
  }
`;

<StyledButton>Custom Button</StyledButton>

Conclusion

Customizing AntD styles can be achieved through these methods. The choice depends on project needs and team preferences. In development, these approaches can be combined based on specific scenarios.