如何自定义Ant.design样式 [英] How to customize Ant.design styles

问题描述

谁知道如何以正确的方式自定义Ant.design样式?

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

例如，我想更改默认的backgroundColor和Header部分的高度:

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

可以吗，或者有更好的自定义样式的方法? 因为我还没有找到某些组件的属性或smth.像这样.

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.

推荐答案

Antd已将大多数样式变量替换为LESS变量

Antd has externized most of their styling variable in LESS variables

如您在

https://github.com. com/ant-design/ant-design/blob/master/components/style/themes/default.less

要覆盖这些变量，您需要使用LESS中的modifyVar函数

To be able to overwrite those variables you need to use modifyVar function from LESS

您可以在此处

所以对于您的特定问题，@layout-header-background可以完成工作

So to your specific question, @layout-header-background does the job

这篇关于如何自定义Ant.design样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！