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.

回答1:

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

回答2:

My personal approach ( I'm working with dva-cli though ): everytime I need to override the css I use a css located to the same folder I wrote and import it such as:

yourcomponent.js
...
import styles from './yourstylesheet.css';
...
< AntdComponent className= {styles.thestyle} />

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

回答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

回答4:

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

回答5:

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 dipper 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.

来源：https://stackoverflow.com/questions/48620712/how-to-customize-ant-design-styles

标签

javascript

css

reactjs

antd