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

Question

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

Answer 1

antd Tooltips docs为您的问题提供提示。 默认情况下，Tooltip 作为 div 添加到正文中 ，事实上，如果没有任何调整，您的自定义样式将无法使用。根据您的要求，您可以使用

GlobalStyle来自样式组件

覆盖 getPopupContainer来自 Antd 工具提示

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

The DOM container of the tip, the default behavior is to create a divelement in body

在这里你可以通过 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 .