Question

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

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

{{1}}

没关系，还是有更好的方式来自定义样式？因为我没有找到某些组件的属性或smth。像这样。

Answer 1

我的个人方法（我正在使用dva-cli）：每次我需要覆盖css我使用位于我编写的同一文件夹的css并导入它，如：

yourcomponent.js
...
从'./yourstylesheet.css'导入样式;
...
＆LT; AntdComponent className = {styles.thestyle} /＆gt;

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

为了能够覆盖那些需要使用LESS

的modifyVar函数的变量

您可以找到有关主题here

的更多信息

因此，根据您的具体问题，@layout-header-background完成工作

Answer 4

覆盖组件样式

由于项目的特殊需要，我们经常满足覆盖组件样式的需要，这是一个简单的示例。

Override the component style

Answer 5

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

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

如果您使用Ant卡

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

我希望你现在能理解

Answer 6

由于样式嵌套优先级，上述方法适用于诸如Header之类的简单组件，但并不总是适用于诸如Menu，Tabs，Collapse，Select等复杂组件。在工作中，我们使用jayanes描述的方法，但我们会深入研究嵌套的Ant Design类。让我在下面的示例中对其进行说明：从“ antd”导入Tab时，只有2个标签可以覆盖以下样式：Tab和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-包装，.ant-tabs-nav-scroll，.ant-tabs-tab-active，.ant-tabs-ink-bar等。可行的方法是：在较少的文件中，将.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组件-选项卡的视频。

如何自定义Ant.design样式

6 个答案: