How to customize Ant.design styles

Antd has externized most of their styling variable in LESS variables

as you can see in

https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

To be able to overwrite those variables you need to use modifyVar function from LESS

you can find more about theming here

So to your specific question, @layout-header-background does the job


My personal approach (I'm working with dva-cli though):

Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:

your-component.js:

import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />

your-stylesheet.css:

.thestyle {
  background-color: '#555555';
}

This is how i customized the default antd styles in a particular component

In scss or less

.booking_information_table {
    :global {
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            padding: 0 0 !important;
            background-color: unset;
            border: none;
            overflow-wrap: break-word;
        }
 }
}

In js file

after the import statement

import styles from './component.module.less'

In return

<Table
   dataSource={bookingInformationDataSource}
   columns={bookingInformationColumns}
   pagination={false}
   className={styles.booking_information_table}
 />