反應中 MUI 開關的工具提示（Material-UI）

Question

我想在MUI 開關按鈕周圍顯示一個工具提示。 工具提示應該隨着切換按鈕而改變。 到目前為止，這是我的代碼：

import * as React from 'react';
import { styled } from '@mui/material/styles';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

const MaterialUISwitch = styled(Switch)(({ theme }) => ({
  width: 62,
  height: 34,
  padding: 7,
  '& .MuiSwitch-switchBase': {
    margin: 1,
    padding: 0,
    transform: 'translateX(6px)',
    '&.Mui-checked': {
      color: '#fff',
      transform: 'translateX(22px)',
      '& .MuiSwitch-thumb:before': {
        backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 511.965 511.965' style='enable-background:new 0 0 511.965 511.965;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M489.107,33.23l-10.371-10.372c-30.479-30.476-80.067-30.479-110.546,0l-15.845,15.844L60.791,330.256 c-0.097,0.097-0.181,0.202-0.273,0.303c-0.984,1.02-1.769,2.24-2.253,3.62l-57.7,164.475c-1.273,3.627-0.353,7.664,2.365,10.382 c1.908,1.907,4.464,2.929,7.073,2.929c1.108,0,2.227-0.185,3.309-0.564l33.089-11.61c5.211-1.828,7.954-7.535,6.125-12.747 c-1.828-5.211-7.534-7.954-12.747-6.125l-13.455,4.72l45.548-129.836l84.288,84.288l-73.921,25.933 c-5.211,1.828-7.954,7.535-6.125,12.747c1.829,5.212,7.535,7.957,12.747,6.125l88.925-31.196 c1.376-0.483,2.593-1.264,3.611-2.245c0.103-0.095,0.212-0.182,0.311-0.282l291.548-291.549c0.002-0.002,0.003-0.003,0.005-0.005 l15.845-15.844C519.584,113.298,519.584,63.707,489.107,33.23z M174.638,429.96l-92.633-92.633L359.416,59.916l92.633,92.633 L174.638,429.96z M474.964,129.633l-8.773,8.773L419.875,92.09l-46.316-46.316L382.332,37c22.679-22.68,59.582-22.68,82.261,0 l10.371,10.372C497.644,70.051,497.644,106.954,474.964,129.633z'/%3E%3Cpath d='M301.537,159.959L133.297,328.2c-3.905,3.905-3.905,10.237,0,14.143c1.953,1.953,4.512,2.929,7.071,2.929 s5.119-0.976,7.071-2.929l168.24-168.241c3.906-3.905,3.906-10.237,0.001-14.143 C311.774,156.054,305.444,156.055,301.537,159.959z'/%3E%3Cpath d='M351.245,110.253l-16.251,16.25c-3.905,3.905-3.905,10.237,0,14.142c1.954,1.953,4.512,2.929,7.072,2.929 c2.559,0,5.118-0.977,7.071-2.929l16.251-16.25c3.905-3.905,3.905-10.237,0-14.142 C361.484,106.348,355.154,106.348,351.245,110.253z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");`,
      },
      '& + .MuiSwitch-track': {
        opacity: 1,
        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
      },
    },
  },
  '& .MuiSwitch-thumb': {
    backgroundColor: theme.palette.mode === 'dark' ? '#60A7D4' : '#60A7D4',
    width: 32,
    height: 32,
    '&:before': {
      content: "''",
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      top: 0,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 59.2 59.2' style='enable-background:new 0 0 59.2 59.2;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M51.062,21.561c-5.759-5.759-13.416-8.931-21.561-8.931S13.7,15.801,7.941,21.561L0,29.501l8.138,8.138 c5.759,5.759,13.416,8.931,21.561,8.931s15.802-3.171,21.561-8.931l7.941-7.941L51.062,21.561z M49.845,36.225 c-5.381,5.381-12.536,8.345-20.146,8.345s-14.765-2.963-20.146-8.345l-6.724-6.724l6.527-6.527 c5.381-5.381,12.536-8.345,20.146-8.345s14.765,2.963,20.146,8.345l6.724,6.724L49.845,36.225z'/%3E%3Cpath d='M29.572,16.57c-7.168,0-13,5.832-13,13s5.832,13,13,13s13-5.832,13-13S36.741,16.57,29.572,16.57z M29.572,24.57 c-2.757,0-5,2.243-5,5c0,0.552-0.448,1-1,1s-1-0.448-1-1c0-3.86,3.14-7,7-7c0.552,0,1,0.448,1,1S30.125,24.57,29.572,24.57z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");`,
    },
  },
  '& .MuiSwitch-track': {
    opacity: 1,
    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
    borderRadius: 20 / 2,
  },
}));

export default function DrawViewSwitch() {
  return (
    <FormGroup>
      <FormControlLabel
        control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
      />
    </FormGroup>
  );
};

我試圖將Tooltip放在FormControlLabel周圍，但它不起作用。 Tooltip實例是否有類似eventhandler處理程序的東西？ 如果是，如何使用？

Answer 1

改變DrawViewSwitch如下

export default function DrawViewSwitch() {
  const [check, setCheck] = React.useState(false);
  const handleCheck = () => {
    setCheck(!check);
  };
  return (
    <>
      <FormGroup>
        <Tooltip title={check ? "eye" : "pencil"}>
          <FormControlLabel
            onChange={handleCheck}
            control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
          />
        </Tooltip>
      </FormGroup>
    </>
  );
}