如何自定义Ant.design样式

Question

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

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

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。像这样。

Answer 1

我的个人方法（尽管我正在使用dva-cli）：每次我需要覆盖CSS时，都使用位于我编写的相同文件夹中的CSS并将其导入，例如：

yourcomponent.js
... 从'./yourstylesheet.css'
导入样式；
...
<AntdComponent className = {styles.thestyle} />

yourstylesheet.css
.thestyle {
background-color：'＃555555';
}

Answer 2

这就是我在特定组件中自定义默认 antd 样式的方式

在 scss 或更少

.booking_information_table {
    :global {
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            padding: 0 0 !important;
            background-color: unset;
            border: none;
            overflow-wrap: break-word;
        }
 }
}

在js文件中

在导入语句之后

从'./component.module.less'导入样式

作为回报

<Table
   dataSource={bookingInformationDataSource}
   columns={bookingInformationColumns}
   pagination={false}
   className={styles.booking_information_table}
 />

Answer 3

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

如您所见

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

为了能够覆盖这些变量，您需要使用modifyVarLESS中的函数

您可以在此处找到有关主题的更多信息

因此，对于您的特定问题，@layout-header-background该工作了吗