overriding ant design styles

config-overrides.js

/**
  That's for customizing ant design
  https://ant.design/docs/react/use-with-create-react-app
  
 
 npm i react-app-rewired customize-cra babel-plugin-import less less-loader
 
 
 package.json:
 
   "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  
  
  index.css:
  
   @import '~antd/dist/antd.css'; 
  
 
 
 */

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

//const darkTheme = require("@ant-design/dark-theme").default

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
   style: true,
  }),
 addLessLoader({
   javascriptEnabled: true,
   modifyVars: {
     '@primary-color': '#1ab394',                       // primary
     '@link-color': '#1ab394',                          // link color
     '@success-color': '#52c41a',                       // success state color
     '@warning-color': '#faad14',                         // warning state color
     '@error-color': '#f5222d',                           // error state color
     '@font-size-base': '15px',                           // major text font size
     '@heading-color': 'rgba(0, 0, 0, .85)',              // heading text color
     '@text-color': 'rgba(0, 0, 0, .65)',                 // major text color
     '@text-color-secondary' : 'rgba(0, 0, 0, .45)',      // secondary text color
     '@disabled-color' : 'rgba(0, 0, 0, .25)',            // disable state color
     '@border-radius-base': '4px',                        // major border radius
     '@border-color-base': '#d9d9d9',                     // major border color
     '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, .15)'  // major shadow for layers
    
    },
 }),
);