设计react-tooltip组件样式的权威指南？

Question

我使用的是react-tooltip，react-emotion。

我不知道如何设置跨度的样式来覆盖默认样式。

这是我到目前为止所得到的：

​

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';
})

​

有没有人有什么建议或者明确的指导，告诉我如何设置这个跨度的样式，这样我就可以覆盖react-tooltip中的默认值了？

文档相当参差不齐，而且网上几乎没有任何示例。

Answer 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文件中，并用ReactTooltipStyled组件替换原始的ReactTooltip。