问题:如何覆盖Material UI tooltip内联样式?

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

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

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

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

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

解答

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

此处显示了 offset 属性的有效选项: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>
  );
}