19

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.

7 Answers 7

14

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}
 />
1
  • 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, 2022 at 18:47
9

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

1
  • 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 Nov 21, 2022 at 18:51
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';
}
2
  • doing the same way, but I would like to have something like <Button bgColor="#dedede" width="20" height="10" ... />
    – Dmitry
    Feb 9, 2018 at 15:30
  • inline style then: I would go : <Button style={{backgroundColor:"#dedede", width:20, height:10}}/>
    – Laureline
    Feb 10, 2018 at 2:16
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

2
  • 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 7, 2018 at 15:01
  • I tried same thing by overriding the class, but no idea why it is not working. I am using less. Jun 11, 2019 at 11:13
3

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.

3
  • 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, 2021 at 14:14
  • @duduwe my video on YouTube is "Ant Design library with React: customize components - tabs". Jul 13, 2021 at 16:16
  • In my case, it is working for any nesting level. I'm just using plain CSS modules.
    – Vivek Nain
    Sep 7, 2022 at 19:35
2

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.