ant design Tooltip文字提示的样式设置

Posted 2023-04-12

参考技术A 1.可以通过设置mouseLeaveDelay控制Tooltip在页面的时间，然后chrome就可以查看元素了。

2.通过查看chrome元素发现它的层级是body的子元素，因而在写css样式尤其是利用less写的时候，需要注意其嵌套。内部结构如下图。红色箭头指向的tooltip-custom为自定义的，在chrome中的CSS可以查看其样式，但是发现直接用  ant-tooltip-  在页面并无法修改它的样式。

3.通过自定义的类名以及类名下的标签就可以修改其样式。

如何自定义 Ant.design 样式

【中文标题】如何自定义 Ant.design 样式

【英文标题】：How to customize Ant.design styles

【发布时间】：2018-07-15 04:47:19

【问题描述】：

谁知道如何以正确的方式自定义 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>
    )

可以吗，或者有更好的方法来自定义样式？ 因为我还没有找到某些组件的属性或smth。像这样。

【参考方案1】：

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

如你所见

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

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

你可以找到更多关于主题here

所以对于您的具体问题，@layout-header-background 可以完成这项工作

【参考方案2】：

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

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

your-component.js：

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

your-stylesheet.css：

.thestyle 
  background-color: '#555555';

【讨论】：

做同样的事情，但我想要像

内联样式然后：我会去：<Button style=backgroundColor:"#dedede", width:20, height:10/>

【参考方案3】：

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

【参考方案4】：

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

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

如果你使用蚂蚁卡

.ant-card-headcolor:#j14

希望你现在能明白

【讨论】：

是的，我明白了，但是我怎样才能为描述表格中列名的那一行设置顶部和底部边框？

我通过覆盖类尝试了同样的事情，但不知道为什么它不起作用。我正在使用较少。

【参考方案5】：

上述方法适用于Header 等简单组件，但并不总是适用于Menu、Tabs、Collapse、Select 等复杂组件，因为样式嵌套优先。在工作中，我们使用 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 组件 - 选项卡的视频。

【讨论】：

你好 Tania，youtube 链接在哪里？这与 MUI 中的 makeStyles 方法相同吗？我不喜欢通过less修改的方式。

@duduwe 我在 YouTube 上的视频是“带有 React 的 Ant 设计库：自定义组件 - 选项卡”。

【参考方案6】：

覆盖组件样式

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

Override the component style

【参考方案7】：

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