使用带有样式组件的反应工具提示 [英] using react tooltip with styled components

问题描述

有没有人有使用 react-tooltip 和 styled-components 的经验?

我尝试将我的工具提示包裹在样式化组件中，但它们的样式没有完全显示

我想要一个黄色背景，但得到了一个带有大量黑色边框的黄色背景

我还想将工具提示直接放在我悬停的位置的顶部，如果可能的话，谁能告诉我如何做到这一点?

代码:

<ReactTooltip className="extraClass" effect="solid">{'我将成为文本，这就是我要去的地方'}</ReactTooltip>

如果我使用 styled-comps，我该如何添加 extraClass?

解决方案

这个答案可能不是书中的答案，但我也没有设法找到一种使用样式组件以正确方式设置样式的方法.

这是我的工作示例.

从'styled-components'导入样式；从 'react-tooltip' 导入 ReactTooltip；export const ReactTooltipStyled = styled(ReactTooltip)`&.type-dark.place-top {背景颜色:蓝色；填充:0.3rem 1rem；&:在{之后边框顶部颜色:蓝色；}}`;

你只需要在你的 React 文件中导入新样式的组件并使用它代替原来的 ReactTooltip 组件.

anyone got any experience using react-tooltip with styled-components?

I tried to wrap my tooltip inside a styled component but they styles weren't fully showing

I wanted a yellow background but got a yellow background with a massive black border

I also want to place the tooltip directly over the top of where I hover, can anyone show me how to do this if possible?

code:

<div>
    <ReactTooltip className="extraClass" effect="solid">
        {'I shall be the text and this is where I will go'}
    </ReactTooltip>
</div>

how do I add the extraClass if im using styled-comps?

解决方案

This answer is maybe not by the book but I also did not manage to find a way to style at proper way using styled components.

This is my working example.

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;
    }
  }
`;

You just need to import the newly styled component in your React file and use it instead of original ReactTooltip component.

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