Menu
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.
507
This gives us an application styled with the default Ant Design theme: Ant Design styles rely on the CSS post-processor less. It's made clear that the correct way to theme Ant Design is to override the default less variables. We, therefore, need to be able to parse those variables and use them in our project. Install Less.
Add a theme.less file overriding the less variable values from Ant Design ( see in commit ). Add hack key to modifyVars option in less-loader. This will write an @import for our theme file where appropriate in the source styles. ⚠️ gotcha alert ⚠️ Be careful to give the proper path to your .less theme file.
import styles from './your-stylesheet.css'; ... < AntdComponent className= {styles.thestyle} /> 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; }
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:
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
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
