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

Question

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

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

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

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

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

原文由 adamcantcook 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jap Mul 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 sidverma 发布，翻译遵循 CC BY-SA 4.0 许可协议