如何自定义 Ant.design 样式 [英] How to customize Ant.design styles
问题描述
谁知道如何正确自定义 Ant.design 样式?
例如,我想更改Header部分的默认背景颜色和高度:
import React, { Component } from 'react';从'antd'导入{表单,布局};const { 页眉、页脚、侧边、内容 } = 布局;导出默认类登录扩展组件{使成为 () {返回 (<div><布局><Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header><布局><内容>主要内容</内容></布局><页脚>页脚</页脚></布局>
)}}
可以吗,或者有更好的自定义样式的方法吗?因为我还没有找到一些组件的属性或 smth.像这样.
Antd 在 LESS 变量中外部化了大部分样式变量
正如你在
中看到的https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
为了能够覆盖这些变量,您需要使用 LESS 中的 modifyVar
函数
您可以在此处
找到有关主题的更多信息所以对于您的具体问题,@layout-header-background
完成工作
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.
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
这篇关于如何自定义 Ant.design 样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!