web-dev-qa-db-ja.com

スタイル付きコンポーネントで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>

styled-compsを使用している場合、extraClassを追加するにはどうすればよいですか？

javascriptcssreactjstooltipstyled-components
4
donut

この答えは本によるものではないかもしれませんが、私はまた、スタイル設定されたコンポーネントを使用して適切な方法でスタイル設定する方法を見つけることができませんでした。

これが私の実例です。

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コンポーネントの代わりに使用する必要があります。

3
Stevan Tosic

コードを共有していないので、ここに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;
}
1
CodeZombie

私にとって、このソリューションは最終的に期待どおりに機能しました。

const StyledTooltip = styled(ReactTooltip)`
  max-width: 20vh;
  white-space: normal;
`
const Tooltip = ({ ...props }) => (
  <StyledTooltip effect="solid" multiline place="top" {...props} />
)
0
yqbk

1つの方法は

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;
    }
`;
0
Sir hennihau