Question

我目前正在开发一个利用Material UI Tooltip组件的React组件。在我的组件中，我需要通过根@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); }元素（popper）手动重新定位Mui工具提示。

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

MuiTooltip-popper

如果尝试提供一种新样式来替换position: absolute; transform: translate3d(792px, 68px, 0px); top: 0px; left: 0px; will-change: transform;属性中的样式，则该属性将不被应用-它们将完全消失。如果有人尝试通过类（例如，通过Material UI倡导的CSS-in-JS approach提供替换样式），则这些样式将不应用，因为内联样式具有优先权。

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

Answer 1

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

offset属性的有效选项显示在此处：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>

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

2 个答案: