Antd 已经在 LESS 变量中外部化了大部分样式变量

正如你所看到的

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

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

你可以在这里找到更多关于主题的信息

所以对于你的具体问题，@layout-header-background工作

我的个人方法（不过我正在使用 dva-cli）：

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

你的component.js：

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

你的样式表.css：

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

这就是我在特定组件中自定义默认 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}
 />

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

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

如果您使用蚂蚁卡

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

我希望你现在能明白

由于样式嵌套优先级，上述方法适用于简单的组件，例如，Header但并不总是适用于复杂的组件，例如Menu, Tabs, Collapse, Select, 和其他。在工作中，我们使用jayanes描述的方法，但我们更深入地研究了嵌套的 Ant Design 类。让我在下面的例子中解释一下：当你Tabs从“antd”导入时，你只有 2 个标签来覆盖样式：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 组件 - 选项卡的视频。