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

Question

我目前正在开发一个利用 Material UI 的 React 组件Tooltip成分。在我的组件中，我需要通过根 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 approach)，这些样式不会被应用，因为内联样式具有优先权。

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

Answer 1

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

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