我正在尝试为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")
);
答案 0 :(得分:1)
antd Tooltips docs给您有关问题的提示。 默认情况下,工具提示会作为div添加到正文中,实际上,您的自定义样式必须进行任何修改才能使用。根据您的要求可以使用
GlobalStyle
来自样式化组件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
的工具提示文档
技巧的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
。
答案 1 :(得分:0)
技巧的DOM容器的默认行为是在主体中创建一个div元素。您可以将其更改为使用getPopupContainer
在Tooltip元素内创建:
<Tooltip
getPopupContainer={(trigger) => {
console.log(trigger);
return trigger;
}}
title="prompt text"
>
使用上面的代码,样式.ant-tooltip-inner
将起作用。
有关更多信息,请检查此链接-> Tooltip Antd API