레이아웃을 중단하지 않고 버튼 그룹 내에서 비활성화된 MUI 버튼에 툴팁을 렌더링할 수 있습니까?

레이아웃을 중단하지 않고 버튼 그룹 내에서 비활성화된 MUI 버튼에 툴팁을 렌더링할 수 있습니까?

MUI를 생성하려고 합니다.ButtonGroup사용할 수 없는 버튼과 툴팁이 있습니다.

다음 코드 블록은 버튼을 올바르게 표시하지만 여기서 설명한 바와 같이 (https://material-ui.com/components/tooltips/#disabled-disabled-disabled) 비활성화 요소는 툴팁과 함께 제공할 수 없습니다.

<ButtonGroup>
    <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
    </Tooltip>
    <Tooltip title={"This is button B"}>
        <Button disabled>{"Button B"}</Button>
    </Tooltip>
</ButtonGroup>

단, 이 경우,span비활성화 버튼 주위에 그룹 레이아웃이 파기됩니다.

<ButtonGroup>
    <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
    </Tooltip>
    <Tooltip title={"This is button B"}>
        <span>
            <Button disabled>{"Button B"}</Button>
        </span>
    </Tooltip>
</ButtonGroup>

네, 가능합니다.버튼을 span 태그 예시로 감싸야 합니다.

<Tooltip title={YOUR_MESSAGE_HERE}>
   <span>
     <Button disabled>my button is disabled</Button>
   </span>
</Tooltip>

비활성화 버튼에는 툴팁 동작을 방해하는 다음 두 가지 측면이 있습니다.

1. 참조한 문서에서 설명한 바와 같이, 디세이블인 경우<button>요소(Material-UI와 무관)는 툴팁의 적절한 동작을 지원하는 방식으로 이벤트를 발생시키지 않습니다.
2. Material-UI는 특히 Material-UI의 포인터 이벤트를 비활성화합니다.ButtonBase컴포넌트(표시)Button디세블로 되어 있는 경우).

두 번째 문제는 포인터 이벤트를 허용하도록 Material-UI의 비활성화된 스타일을 재정의함으로써 해결할 수 있습니다.

import MuiButton from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";

const Button = withStyles({
  root: {
    "&.Mui-disabled": {
      pointerEvents: "auto"
    }
  }
})(MuiButton);

첫 번째 문제는 Button's를 사용하여 해결할 수 있습니다.component사용하기 위한 받침대<div>대신 요소<button>요소.비활성화 버튼 요소는 클릭이벤트를 수신하지 않기 때문에 버튼이 비활성화 상태로 동작하도록 하기 위해 이 코드는onClick사용할 수 없습니다.

  const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
    const adjustedButtonProps = {
      disabled: disabled,
      component: disabled ? "div" : undefined,
      onClick: disabled ? undefined : onClick
    };
    return (
      <Tooltip title={tooltipText}>
        <Button {...other} {...adjustedButtonProps} />
      </Tooltip>
    );
  };

다음으로 버튼 B와 C가 모두 비활성화되어 있는 경우의 데모를 나타냅니다.버튼 A와 B는 위에서 설명한 방법을 사용하며, 버튼 C는 비교를 위한 툴팁이 없는 일반 Material-UI 버튼입니다.아래의 추가 버튼을 누르면 B와 C의 비활성 상태가 전환됩니다.

import React from "react";
import Tooltip from "@material-ui/core/Tooltip";
import MuiButton from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
import ButtonGroup from "@material-ui/core/ButtonGroup";

const Button = withStyles({
  root: {
    "&.Mui-disabled": {
      pointerEvents: "auto"
    }
  }
})(MuiButton);

const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
  const adjustedButtonProps = {
    disabled: disabled,
    component: disabled ? "div" : undefined,
    onClick: disabled ? undefined : onClick
  };
  return (
    <Tooltip title={tooltipText}>
      <Button {...other} {...adjustedButtonProps} />
    </Tooltip>
  );
};

export default function App() {
  const [bAndCDisabled, setBAndCDisabled] = React.useState(true);

  return (
    <>
      <ButtonGroup>
        <ButtonWithTooltip
          tooltipText="This is Button A"
          onClick={() => console.log("A")}
        >
          {"Button A"}
        </ButtonWithTooltip>
        <ButtonWithTooltip
          tooltipText="This is Button B"
          onClick={() => console.log("B")}
          disabled={bAndCDisabled}
        >
          {"Button B"}
        </ButtonWithTooltip>
        <MuiButton onClick={() => console.log("C")} disabled={bAndCDisabled}>
          {"Button C"}
        </MuiButton>
      </ButtonGroup>
      <br />
      <br />
      <MuiButton
        variant="contained"
        onClick={() => setBAndCDisabled(!bAndCDisabled)}
      >
        Toggle disabled for B and C
      </MuiButton>
    </>
  );
}

단추 주위에 div/span을 추가하면 단추 스타일링이 엉망이 될 수 있습니다.그래서 이상적으로는<>또는<React.Fragment>그러나 툴팁은 리액션 fragment와 함께 동작하지 않기 때문에<span>질문에서 말한 것처럼요.하지만 그 경우엔ButtonGroup아동 버튼 요소를 복제하고 스타일링을 위한 소품을 전달하여 작동시키는 데 사용됩니다. 이 경우 스타일 소품을 "Button B"로 보내야 합니다.

import React from "react";
import "./styles.css";
import { Tooltip, Button } from "@material-ui/core";
import ButtonGroup from "@material-ui/core/ButtonGroup";

export default function App() {
  const ButtonDemo = (props) => {
    return (
      <Tooltip title={"This is button B"}>
        <span>
          <Button {...props} disabled>
            {"Button B"}
          </Button>
        </span>
      </Tooltip>
    );
  };

  return (
    <ButtonGroup>
      <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
      </Tooltip>
      <ButtonDemo />
    </ButtonGroup>
  );
}

    

mui > v5에 사용합니다.

<Tooltip title={YOUR_MESSAGE_HERE}>
  <Button disabled>
    <span>
     my button is disabled
    </span>
  </Button>
</Tooltip>

언급URL : https://stackoverflow.com/questions/61115913/is-it-possible-to-render-a-tooltip-on-a-disabled-mui-button-within-a-buttongroup