如何自定义Ant.design样式

Question

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

例如，我想更改 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>
    )
}
}

是否可以这样做，或者有更好的方法来自定义样式？ 因为我没有找到一些组件的属性之类的东西。

- Dmitry

Answer 1

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

使用Scss或Less

.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 文件中

在 import 语句之后

从 './component.module.less' 导入样式，赋值给 styles 变量

在返回语句中

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

- Chathuranga Kasthuriarachchi

---

我在使用less模块时遇到了问题，你是如何配置它们的？我在css in js方面遇到了错误，但在scss模块中运行良好。 - nadiTime

Answer 2

Antd已将大部分的样式变量外部化为LESS变量

如您所见

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

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

您可以在此处了解更多关于主题定制的内容

因此，对于您的具体问题，@layout-header-background 可以解决

- Yichz

---

随着 antd 升级到 5 版本，使用上述链接将不再提供 less 变量列表。Github 将报告页面未找到。要仍然访问 antd 4 版本的 less 变量列表，请使用以下链接：https://github.com/ant-design/ant-design/blob/4.24.3/components/style/themes/default.less - Khetho Mtembo

Answer 3

我个人的做法（我正在使用dva-cli）：

每次我需要覆盖CSS时，我都会使用一个位于相同文件夹中的CSS文件，并导入它，例如：

your-component.js:

import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />

your-stylesheet.css:

.thestyle {
  background-color: '#555555';
}

- Laureline

---

以相同的方式进行，但我想要像这样的东西<Button bgColor="#dedede" width="20" height="10" ... />。 - Dmitry

内联样式如下：我会这样写： <Button style={{backgroundColor:"#dedede", width:20, height:10}}/> - Laureline

Answer 4

在 less 文件中（类似于 CSS），您可以处理自定义样式。例如，在您的情况下。

.ant-layout-header{ 
      height: 100vh;
      background-color:#f50;
}

如果您使用Ant卡

.ant-card-head{color:#j14}

我希望你现在能理解。

- jayanes

---

是的，我明白了，但是如何使表格中描述列名称的那一行的顶部和底部都有边框呢？ - Dmitry

我尝试通过覆盖类来做同样的事情，但不知道为什么它不起作用。我正在使用less。 - Hassan Ajaz

Answer 5

上述方法适用于像Header这样简单的组件，但由于样式嵌套优先级的原因，并不总是适用于像Menu、Tabs、Collapse、Select等复杂组件。在我们的工作中，我们使用jayanes描述的方法，但我们会深入嵌套Ant Design类。让我在下面的示例中解释一下：当您从 "antd" 导入 Tabs 时，您只需要覆盖两个标签的样式：Tabs 和 TabPane。

<div className={styles.tabsContainer}>
    <Tabs className={styles.tabs}>
        <TabPane className={styles.tabPane}>
            Tab 1 Title
        </TabPane>
    </Tabs>
</div>

但是，这个antd组件的结构非常复杂。可以在开发工具中验证：它有.ant-tabs-bar、.ant-tabs-nav-container、.ant-tabs-tab-prev、.ant-tabs-tab-next、.ant-tabs-nav-wrap、.ant-tabs-nav-scroll、.ant-tabs-tab-active、.ant-tabs-ink-bar和其他类。解决方法是：在你的less文件中，将.ant-...类嵌套在你自己父组件的className中（以避免在代码编译后覆盖整个应用程序中的antd类）。在这里编写您自己的CSS属性，例如：

.tabsContainer {
    .ant-tabs-tab-active {
        background: #fff266;
        color: #31365c;
        &:hover {
            color: darken(#31365c, 5%);
        }
    }
    .ant-tabs-ink-bar {
        background: #fff266;
    }
}

如果您需要更详细的解释，请参考我在YouTube上发布的有关如何自定义Ant Design组件 - 选项卡的视频。

- Tania Shulga

---

你好，Tania，YouTube链接在哪里？这是与MUI中的makeStyles相同的方法吗？我不喜欢通过less进行修改的方法。 - duduwe

@duduwe 我在YouTube上的视频是“使用React的Ant Design库：自定义组件-选项卡”。 - Tania Shulga

在我的情况下，它适用于任何嵌套级别。我只是使用普通的CSS模块。 - Vivek Nain

Answer 6

定制 Antd 主题颜色可能会很麻烦，因此我创建了一个包，可以使用 post CSS 轻松更改它们，甚至可以将它们更改为 CSS 变量并在运行时更改。有关更多信息，请访问https://www.npmjs.com/package/ant-post-css-theme。

- Anas Laham

Answer 7

覆盖组件样式

由于项目的特殊需求，我们经常需要覆盖组件样式，这里有一个简单的例子。

覆盖组件样式

- afc163