How to customize Ant.design styles

Question

Who knows how to customize Ant.design styles in proper way?

For example, I want to change the default backgroundColor and height of Header section:

import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

export default class Login extends Component {

render () {
    return (
        <div>
            <Layout>
                <Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
                <Layout>
                    <Content>main content</Content>
                </Layout>
                <Footer>footer</Footer>
            </Layout>
        </div>
    )
}
}

Is it ok, or there is a better way to customize styles? Because I have not found some component's attributes or smth. like this.

score 10 · Accepted Answer · answered Feb 05 '18 at 15:59

10

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

answered Feb 05 '18 at 15:59

Yichz

9,250
10
54
92

With the update of antd to version 5 the list of less variables is no longer available using the link above. Github will report the page is not found. To still access the antd version 4 list of less variables use the following [link](https://github.com/ant-design/ant-design/blob/4.24.3/components/style/themes/default.less) – Khetho Mtembo Nov 21 '22 at 18:51

Chathuranga Kasthuriarachchi · Answer 2 · 2020-10-06T14:23:23.253

9

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

edited Oct 06 '20 at 14:23

answered May 16 '20 at 05:26

Chathuranga Kasthuriarachchi

1,221
10
13

I have a problem using less modules, how did you configure them, I have errors of css in js, works fine with scss modules.... – nadiTime Jan 17 '22 at 18:47

score 8 · Answer 3 · edited May 07 '20 at 03:10

8

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';
}

edited May 07 '20 at 03:10

Toastrackenigma

7,604
4
45
55

answered Feb 09 '18 at 10:54

Laureline

167
4
5

doing the same way, but I would like to have something like – Dmitry Feb 09 '18 at 15:30
inline style then: I would go : `````` – Laureline Feb 10 '18 at 02:16

score 3 · Answer 4 · edited Oct 25 '20 at 23:09

3

In the less file(like a CSS) you can handle customize styles. For example in your case

.ant-layout-header{ 
      height: 100vh;
      background-color:#f50;
}

If you use Ant card

.ant-card-head{color:#j14}

I hope you can understand now

edited Oct 25 '20 at 23:09

Subrato Pattanaik

5,331
6
21
52

answered Feb 06 '18 at 16:45

jayanes

584
6
10
21

yes, I see, but how can I make top and bottom borders of that row which describes names of columns in a table? – Dmitry Feb 07 '18 at 15:01
I tried same thing by overriding the class, but no idea why it is not working. I am using less. – Hassan Ajaz Jun 11 '19 at 11:13

score 3 · Answer 5 · edited Jul 06 '21 at 14:40

The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go deeper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.

<div className={styles.tabsContainer}>
    <Tabs className={styles.tabs}>
        <TabPane className={styles.tabPane}>
            Tab 1 Title
        </TabPane>
    </Tabs>
</div>

But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others. The way to go is: in your less file nest the .ant-... classes inside your own parent component's className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:

.tabsContainer {
    .ant-tabs-tab-active {
        background: #fff266;
        color: #31365c;
        &:hover {
            color: darken(#31365c, 5%);
        }
    }
    .ant-tabs-ink-bar {
        background: #fff266;
    }
}

If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.

Hello Tania, where's the youtube link? Is this the same approach as makeStyles in MUI? I don't like the approach of modifying via less. — duduwe, May 20 '21 at 14:14
@duduwe my video on YouTube is "Ant Design library with React: customize components - tabs". — Tania Shulga, Jul 13 '21 at 16:16
In my case, it is working for any nesting level. I'm just using plain CSS modules. — Vivek Nain, Sep 07 '22 at 19:35

score 2 · Answer 6 · answered Nov 16 '21 at 10:03

Customizing Antd theme Colors can be a hassle thus, I created a package that allows you to change them easily with post CSS you can even change them to CSS variables and change them in runtime. For more info https://www.npmjs.com/package/ant-post-css-theme

score 1 · Answer 7 · edited Mar 21 '19 at 07:41

1

Override the component style

Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.

Override the component style

edited Mar 21 '19 at 07:41

Afaq Ahmed Khan

2,164
2
29
39

answered Dec 31 '18 at 05:32

afc163

1,628
1
23
35

How to customize Ant.design styles

7 Answers7

Linked