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