React 的 Material UI 快速拨号中工具提示的字体大小

Question

How to modify font size of tooltip shown on hovering over speeddialaction component?

Link to SpeedDial Component https://material-ui.com/components/speed-dial/

Link to Speeddialaction component https://material-ui.com/api/speed-dial-action/

Answer 1

You can style tooltip by adding TooltipClasses prop to SpeedDialAction component. All that classes will be passed to Tooltip component, as it is written in SpeedDialAction docs

Here is modified example from official docs :

import React, { useState } from "react";
import SpeedDial from "@material-ui/lab/SpeedDial";
import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
import FileCopyIcon from "@material-ui/icons/FileCopyOutlined";
import SaveIcon from "@material-ui/icons/Save";
import PrintIcon from "@material-ui/icons/Print";
import ShareIcon from "@material-ui/icons/Share";
import DeleteIcon from "@material-ui/icons/Delete";
import { makeStyles } from "@material-ui/core/styles";

const actions = [
  { icon: <FileCopyIcon />, name: "Copy" },
  { icon: <SaveIcon />, name: "Save" },
  { icon: <PrintIcon />, name: "Print" },
  { icon: <ShareIcon />, name: "Share" },
  { icon: <DeleteIcon />, name: "Delete" }
];

const useStyles = makeStyles({
  tooltip: {
    fontSize: 30
  }
});

function SpeedDials() {
  const [open, setOpen] = useState(false);
  const classes = useStyles();

  function handleClose() {
    setOpen(false);
  }
  function handleOpen() {
    setOpen(true);
  }
  function handleClick() {
    setOpen(!open);
  }

  return (
    <SpeedDial
      ariaLabel="SpeedDial example"
      icon={<SpeedDialIcon />}
      open={open}
      direction="up"
      onBlur={handleClose}
      onClick={handleClick}
      onClose={handleClose}
      onFocus={handleOpen}
      onMouseEnter={handleOpen}
      onMouseLeave={handleClose}
    >
      {actions.map(action => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
          onClick={handleOpen}
          TooltipClasses={classes}
        />
      ))}
    </SpeedDial>
  );
}

export default SpeedDials;

LIVE DEMO

Answer 2

我更正了 SpeedADialAction Example.Code 发布在链接上的代码