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}
/>