Как переписать встроенные стили всплывающей подсказки пользовательского интерфейса материала?

Question

В настоящее время я разрабатываю компонент React, который использует Material UI Tooltip . В моем компоненте мне нужно вручную переместить подсказку Mui через корневой элемент popper (MuiTooltip-popper).

Но подсказка Mui отображается с несколькими встроенными CSS-свойствами:

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

Если попытаться предоставить новые стили для замены их в атрибуте style, свойства просто не применяются - они полностью исчезают. Если кто-то пытается предоставить заменяющие стили через класс (например, с помощью CSS-in-JS-подхода , поддерживаемого пользовательским интерфейсом материалов), эти стили не применяются, так как встроенный стиль имеет приоритет.

Мне удалось переписать стили, используя флаг !important в моем классе CSS. Однако это не очень элегантное решение. Есть ли более «чистый» способ перезаписи стилей?

Answer 1

Чтобы изменить положение поппера, вы должны передать правильные настройки фактической библиотеке поппера

Здесь отображаются действительные параметры свойства смещения: https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiersoffset

Я привел пример, чтобы переместить его на 40px вверх и 40px вправо от «верхней» позиции по умолчанию.

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>