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

Question

我正在尝试为 antd 工具提示组件自定义宽度：链接到文档

这怎么办？

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")
);

Answer 1

antd 工具提示文档为您的问题提供了提示。 默认情况下，工具提示会作为 div 添加到正文中，事实上，如果不进行任何调整，您的自定义样式将无法工作。根据您的要求，您可以使用

1. GlobalStyle

   来自样式组件
2. 覆盖 Antd Tooltip 中的

   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。

获取PopupContainer

来自

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

。

Answer 2

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

getPopupContainer

:

在 Tooltip 元素内创建

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

使用上面的代码，您的样式

.ant-tooltip-inner

将会起作用。

有关更多信息，请检查此链接 -> 工具提示 Antd API

Answer 3

对于寻找“antd@5 主题解决方案”的人，可以使用

colorTextLightSolid

标记

在主题上设置工具提示的颜色

Answer 4

我已经解决了这个问题。

 <Tooltip
    style={{ whiteSpace: "pre-line" }}
    title={
      // eslint-disable-next-line react/no-danger-with-children
      <p
        dangerouslySetInnerHTML={{
          __html: JSON.parse(props?.node?.attrs?.wholePrompt).prompt,
        }}
      ></p>
    }
    color={"geekblue"}
  >

点我