如何覆盖 Material UI 工具提示内联样式？

Question

我目前正在开发一个利用Material UI Tooltip组件的 React 组件。 在我的组件中，我需要通过根popper元素 ( MuiTooltip-popper ) 手动重新定位 Mui 工具提示。

但是，Mui 工具提示是使用一些开箱即用的内联 CSS 属性呈现的：

position: absolute;
transform: translate3d(792px, 68px, 0px); 
top: 0px;
left: 0px;
will-change: transform;

如果尝试提供新样式来替换style属性中的这些style ，则这些属性根本不会被应用——它们完全消失了。 如果尝试通过类提供替换样式（例如通过 Material UI 提倡的CSS-in-JS 方法），则不会应用这些样式，因为内联样式具有优先权。

我已经能够使用 CSS 类中的!important标志覆盖样式。 但是，感觉不是一个非常优雅的解决方案。 有没有更“干净”的方式可以覆盖样式？

Answer 1

要重新定位 popper，您必须将正确的设置传递给实际的popper 库

偏移属性的有效选项显示在此处： https : //github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiersoffset

我提供了一个示例，将其从默认的“顶部”位置向上移动 40 像素和向右移动 40 像素。

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <div>
      <Tooltip
        style={{ margin: "150px" }}
        title="ABCDEFG"
        placement="top"
        open
        PopperProps={{
          popperOptions: {
            modifiers: {
              offset: {
                enabled: true,
                offset: '40px, 40px',
              },
            },
          },
        }}

      >
        <Button>My button</Button>
      </Tooltip>
    </div>
  );
}

Answer 2

<Tooltip
  title={
    <React.Fragment>
      <span className={classes.arrowArrow} ref={this.handleArrowRef} />
    </React.Fragment>
  }
  placement="right" //---> right/left/top/bottom
  classes={{
    popper: classes.arrowPopper,
    tooltip: classes.darkTooltip,
  }}
  PopperProps={{
    popperOptions: {
      modifiers: {
        arrow: {
          enabled: Boolean(this.state.arrowRef),
          element: this.state.arrowRef,
        }
      }
    }
  }}
>
  <sub className={classes.subscript}>see more...</sub>
</Tooltip>