如何覆蓋 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>