Javascript 如何自定义Ant.design样式

谁知道如何以适当的方式定制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>
    )
}
}

import React，{Component}来自'React'；
从“antd”导入{Form，Layout}；
const{Header，Footer，Sider，Content}=Layout；
导出默认类登录扩展组件{
渲染（）{
返回(
标题
主要内容
页脚
)
}
}

这样可以吗，还是有更好的方式来定制样式？

---

因为我没有找到一些组件的属性或smth。就像这样。

Antd将大多数样式变量外部化为更少的变量

正如你在书中看到的

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

modifyVar

函数从较少的

你可以找到更多关于主题化的信息

因此，对于您的特定问题，

@layout header background

在您可以处理自定义样式的较少文件（如CSS）中执行任务。对于 你的例子

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

如果你使用蚂蚁卡

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

我希望您现在能够理解我的个人方法（尽管我正在使用dva cli）：

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

您的组件.js：

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

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

---

替代零部件样式

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

---

上述方法适用于标题等简单组件，但由于样式嵌套优先级的原因，并不总是适用于菜单、选项卡、折叠、选择等复杂组件。在工作中，我们使用jayanes所描述的方法，但我们进入嵌套蚂蚁设计类。让我在下面的示例中解释一下：当您从“antd”导入选项卡时，只有2个标记可以覆盖：Tabs和TabPane的样式

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

---

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

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

在SCS或更低版本中

.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}
 />

是的，我明白了，但是我怎样才能创建描述表中列名称的行的上边框和下边框呢？我通过重写类尝试了同样的方法，但不知道它为什么不起作用。我用的更少。用同样的方法，但我想有一些类似内联风格的东西：我会：

你好，塔尼亚，youtube链接在哪里？这与MUI中的makeStyles相同吗？我不喜欢通过较少的方式进行修改。

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