2

我正在使用反应工具提示，反应情绪。

我无法弄清楚如何设置跨度的样式以覆盖默认样式。

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

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 中的默认值？

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

4

1 回答 1

0

我遇到了类似的问题，但能够使用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组件。

于 2019-09-18T16:52:11.177 回答