使用样式化组件自定义 antd 工具提示样式

Posted 2023-02-22

【中文标题】使用样式化组件自定义 antd 工具提示样式

【英文标题】：customize antd tooltip styles using styled components

【发布时间】：2020-12-09 02:10:45

【问题描述】：

我正在尝试为 antd 工具提示组件自定义宽度：Link to docs

如何做到这一点？

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import  Tooltip  from "antd";
import styled from "styled-components";

const Styled = styled.div`
  .ant-tooltip-inner 
    color: yellow;
    background-color: green;
    width: 800px;
  
`;

ReactDOM.render(
  <Styled>
    <Tooltip title="prompt text">
      <span>Tooltip will show on mouse enter.</span>
    </Tooltip>
  </Styled>,
  document.getElementById("container")
);

【参考方案1】：

提示的 DOM 容器的默认行为是在 body 中创建一个 div 元素。您可以使用getPopupContainer 将其更改为在 Tooltip 元素内创建：

<Tooltip
   getPopupContainer=(trigger) => 
      console.log(trigger);
      return trigger;
   
   title="prompt text"
>

使用上面的代码，.ant-tooltip-inner 的样式将起作用。

欲了解更多信息，请查看此链接 -> Tooltip Antd API

【参考方案2】：

antd Tooltips docs 为您的问题提供提示。 Tooltip默认是作为div添加到body中的，实际上你的自定义样式如果不做任何修改是不会生效的。根据您的要求，您可以使用

GlobalStyle 来自样式化组件 从 Antd 工具提示覆盖 getPopupContainer

全球风格

作为一种解决方法，您可以使用globalStyle

const GlobalStyle = createGlobalStyle`
  body 
    .ant-tooltip-inner 
      color: yellow;
      background-color: green;
      width: 800px;
    
  
`;

ReactDOM.render(
  <Tooltip title="prompt text">
    <GlobalStyle />
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>,
  document.getElementById("container")
);

这里有一个CodeSandbox 用于此解决方法。

getPopupContainer

来自getPopupContainer 的工具提示文档

tip的DOM容器，默认行为是创建一个div 正文中的元素

在这里，您只需将 triggerNode 传递为父对象，您的样式就会按预期设置。

const Styled = styled.div`
  .ant-tooltip-inner 
    color: yellow;
    background-color: green;
    width: 800px;
  
`;

ReactDOM.render(
  <Styled>
    <Tooltip title="prompt text" getPopupContainer=(triggerNode) => triggerNode>
      <span>Tooltip will show on mouse enter.</span>
    </Tooltip>
  </Styled>,
  document.getElementById("container")
);

工作CodeSandBox 使用getPopupContainer。

【讨论】：

使用 GlobalStyle 是一种解决方案，但不能违反。我也有同样的问题，如果你想像这样包装组件，getPopupContainer 是一个很好的解决方案。问题是当您尝试添加位置=“顶部”时不起作用。此外，如果您的工具提示文本较长，它不会像默认情况下那样制动。试着看看你的沙盒会发生什么。 @zerocewl

我遇到了类似的问题，在阅读了这个答案之后，能够以类似于此处概述的方式使用 getPopupContainer 解决它。在撰写本文时，来自 Ant Design 的 getPopupContainer 的文档不是很好，我不得不进行一些试验和错误来确定将我的类放在哪里以及将什么指定为弹出容器，这个答案是一个帮助.

请注意，如果您不希望工具提示在 span 中，您可以执行以下操作：``` triggerNode > 工具提示将在鼠标输入时显示。 ``` 这仍然会导致工具提示按照需要设置样式，但现在跨度和工具提示都将成为样式化 div 的孩子。在我的 triggerNode 是一个不能有子元素的替换元素的情况下，这很方便。