javascript - 对样式化的组件使用react工具提示

任何人都有使用react-tooltip和styled-components的经验？

我试图将工具提示包装在带样式的组件中，但是它们的样式没有完全显示出来

我想要黄色背景，但黄色背景带有大量黑色边框

我还想将工具提示直接放在我悬停的顶部上方，如果可以的话，有人可以告诉我如何执行此操作吗？

代码:

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

如果我使用styles-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组件。