使用样式化的组件自定义antd工具提示样式 [英] customize antd tooltip styles using styled components

问题描述

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

I am trying to have custom width for antd tooltip component: 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工具提示文档给您提示您的问题. 默认情况下，工具提示会作为div添加到正文中，实际上，您的自定义样式必须进行任何修改才能使用.根据您的要求可以使用

The antd Tooltips docs gives you a hint for your issue. The Tooltip is added as div in the body by default, in fact your custom style won't work without any adaptions. Depending on your requirements you can use

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

1. GlobalStyle from Styled Components
2. Overwrite getPopupContainer from Antd Tooltip

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

技巧的DOM容器，默认行为是创建一个div 体内元素

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

在这里，您只需传递triggerNode作为父对象，然后就可以按预期设置样式了.

Here you can just pass the triggerNode to be the parent object and your styles are set as expected.

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

正在使用getPopupContainer的 CodeSandBox .

这篇关于使用样式化的组件自定义antd工具提示样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！