样式化 react-tooltip 组件的权威指南？答案

【问题标题】：Definitive guide for styling react-tooltip components?样式化 react-tooltip 组件的权威指南？
【发布时间】：2019-01-09 15:53:36
【问题描述】：

我正在使用 react-tooltip，react-emotion。

我不知道如何设置 span 的样式以覆盖默认样式。

这是我目前所得到的：

import React, { PureComponent } from 'react';
import styled from 'react-emotion';

const myTooltip = (Wrapper, toolTip) => {
  class TooltipWrap extends PureComponent {
    render() {
      return (
        <span
          data-tip={toolTip}
          data-delay-show="250"
          data-place="bottom"
          className={TooltipStyle}
        >
          <Wrapper
            {...this.props}
          />
        </span>
      );
    }
  }

  return TooltipWrap;
};

export default withToolTip;

const TooltipStyle = styled.span ({
  color: 'red !important';
  fontSize: '48px !important';
})

关于如何设置这个 span 的样式，任何人都有任何提示或具体的权威指南，以便我可以覆盖 react-tooltip 中的默认值？

文档参差不齐，网络上几乎没有任何示例。

【问题讨论】：

标签： css reactjs emotion react-tooltip

【解决方案1】：

我遇到了类似的问题，但能够使用 styled 组件覆盖默认样式并将其传递给 ReactTooltip 组件

import React, { PureComponent } from 'react';
import styled from 'react-emotion';
import ReactTooltip from 'react-tooltip';

const myTooltip = (Wrapper, toolTip) => {
  class TooltipWrap extends PureComponent {
    render() {
      return (
        <span
          data-tip={toolTip}
          data-delay-show="250"
          data-place="bottom"
        >
          // Replace ReactTooltip component with styled one
          <ReactTooltipStyled type="dark" />
          <Wrapper
            {...this.props}
          />
        </span>
      );
    }
  }

  return TooltipWrap;
};

export default withToolTip;

export const ReactTooltipStyled = styled(ReactTooltip)`
  &.place-bottom {
    color: red;
    font-size: 48px;
  }
`;

使用此方法，您只需将新样式的组件导入您的 React 文件，并将原来的 ReactTooltip 替换为 ReactTooltipStyled 组件。

【讨论】：