Revision history [back]

In Ant Design version 5, you can override colors and styles for components using Less variables.

1. First, create a custom theme file (e.g. "custom-theme.less") and import it in your project's entry point (e.g. "index.less").

2. In your custom theme file, define the Less variables for the components you want to override. For example, to change the primary color for all buttons, you can define the following variable:

   @primary-color: #f00;
   

3. Use the Less variables in your component styles. For example, to style a button with the new primary color, you can use the following Less mixin:

   .custom-button {
   .ant-btn-primary {
     color: @primary-color;
     background-color: darken(@primary-color, 10%);
     border-color: darken(@primary-color, 20%);
   }
   }
   

4. Build and run your project, and the components will be styled with the new colors and styles.

Note: If you prefer to use JavaScript instead of Less, you can also override colors and styles using the "theme" property of the "ConfigProvider" component. Consult the Ant Design documentation for more information.