[英]using react tooltip with styled components
任何人都有使用帶有styled-components
react-tooltip
經驗嗎?
我試圖將我的工具提示包裹在一個樣式化的組件中,但它們的樣式沒有完全顯示
我想要一個黃色的背景,但得到了一個帶有大量黑色邊框的黃色背景
我還想將工具提示直接放在我懸停的位置的頂部,如果可能的話,誰能告訴我如何做到這一點?
代碼:
<div>
<ReactTooltip className="extraClass" effect="solid">
{'I shall be the text and this is where I will go'}
</ReactTooltip>
</div>
如果我使用 styled-comps,我該如何添加 extraClass?
這個答案可能不是這本書,但我也沒有設法找到一種使用樣式組件以正確方式設置樣式的方法。
這是我的工作示例。
import styled from 'styled-components';
import ReactTooltip from 'react-tooltip';
export const ReactTooltipStyled = styled(ReactTooltip)`
&.type-dark.place-top {
background-color: blue;
padding: 0.3rem 1rem;
&:after {
border-top-color: blue;
}
}
`;
你只需要在你的 React 文件中導入新樣式的組件並使用它而不是原始的 ReactTooltip 組件。
對我來說,這個解決方案終於按預期工作了。
const StyledTooltip = styled(ReactTooltip)`
max-width: 20vh;
white-space: normal;
`
const Tooltip = ({ ...props }) => (
<StyledTooltip effect="solid" multiline place="top" {...props} />
)
由於您還沒有分享代碼,這里是帶有react-tooltip
的無狀態組件
import React from "react";
import ReactTooltip from 'react-tooltip'
import {Link} from "react-router-dom"
const UserActionLink = ({to,tooltip,alignRight,btnClassname,iconClassname,name,toolTipName}) =>{
const buttonClassname = btnClassname ? " btn mx-2 " + btnClassname : " btn mx-2 "
const iconsClassname = iconClassname ? " fa " + iconClassname : " fa "
const align = alignRight ? " float-right " : " float-left "
return (
<span>
<Link className={[buttonClassname , align ].join(' ')} data-tip={toolTipName} to={to}>
<i className={iconsClassname} aria-hidden="true"></i> {name}
</Link>
<ReactTooltip />
</span>
);
}
export default UserActionLink
編輯這是工作代碼:
<div className="customTooltip">
<ReactTooltip effect="solid">
{'I shall be the text and this is where I will go'}
</ReactTooltip>
</div>
.customTooltip .__react_component_tooltip.place-top{
margin-top:0 !important;
}
.customTooltip .__react_component_tooltip.type-dark{
background-color: #e6bd32;
}
.customTooltip .__react_component_tooltip.type-dark.place-top:after {
border-top-color: #d2ac2d;
border-top-style: solid;
border-top-width: 6px;
}
一種方法是
import * as React from "react";
import styled from "styled-components";
import OriginalReactTooltip from "react-tooltip";
export const ReactTooltip = styled(OriginalReactTooltip).attrs({
className: "custom-tooltip",
})`
&.custom-tooltip {
background-color: red;
}
`;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.