如何自定义 Ant.design 样式

Question

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

例如，我想更改页眉部分的默认背景颜色和高度：

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

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

如您在

中所见

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

为了能够覆盖这些变量，您需要使用 LESS

中的 modifyVar 函数

您可以找到更多关于主题的信息 here

所以对于你的具体问题，@layout-header-background 就可以了

Answer 2

在 less 文件中（如 CSS）您可以处理自定义样式。为了你的例子

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

如果你使用蚂蚁卡

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

希望你现在能明白

Answer 3

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

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

你的-component.js:

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

你的-stylesheet.css:

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

Answer 4

覆盖组件样式

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

Override the component style

Answer 5

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

Answer 6

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

导入语句后

import styles from './component.module.less'

在return

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

Answer 7

自定义 Antd 主题颜色可能很麻烦，因此，我创建了一个包，允许您使用 post CSS 轻松更改它们，您甚至可以将它们更改为 CSS 变量和在运行时更改它们。欲了解更多信息 https://www.npmjs.com/package/ant-post-css-theme

如何自定义 Ant.design 样式

How to customize Ant.design styles

javascript

css

reactjs

antd