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)`
  &.type-dark.place-bottom {
    color: red;
    font-size: 48px;
  }
`;

使用此方法，您所要做的就是将新样式的组件导入到您的React文件中，并用ReactTooltip组件替换原始的ReactTooltipStyled。

有关确定react-tooltip组件样式的权威指南？

1 个答案: