CODEWITHSUNDEEP
javascriptcssreactjsantd
Dmitry
Dmitry

Reputation: 867

How to customize Ant.design styles

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.

Upvotes: 20

Views: 107059

Answers (7)

Yichz
Yichz

Reputation: 9681

The original answer was from 2018, a lot has changed since then, please refer to their documentation

As @khetho mtembo said, starting v5 those less variables got removed, v4 less values can be found here

Original answer:

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

Upvotes: 9

Anas Laham
Anas Laham

Reputation: 21

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

Upvotes: 2

Tania Shulga
Tania Shulga

Reputation: 228

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.

Upvotes: 3

jayanes
jayanes

Reputation: 634

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

Upvotes: 3

Chathuranga Kasthuriarachchi
Chathuranga Kasthuriarachchi

Reputation: 1623

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

Upvotes: 15

Laureline
Laureline

Reputation: 187

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

Upvotes: 8

afc163
afc163

Reputation: 1716

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

Upvotes: 1

Related Questions