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

如何解决使用样式化的组件自定义antd工具提示样式

我正在尝试为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")
);

解决方法

antd Tooltips docs给您有关问题的提示。 默认情况下，工具提示会作为div添加到正文中，实际上，您的自定义样式必须进行任何修改才能使用。根据您的要求可以使用

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

GlobalStyle

作为一种解决方法，您可以使用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的工具提示文档

技巧的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。

,

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

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

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

有关更多信息，请检查此链接-> Tooltip Antd API