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

IT技术 reactjs material-ui
2021-05-14 08:35:36

如何修改悬停在快速拨号组件上时显示的工具提示的字体大小?

链接到 SpeedDial 组件 https://material-ui.com/components/speed-dial/

链接到 Speeddialaction 组件 https://material-ui.com/api/speed-dial-action/

2个回答

您可以通过向组件添加TooltipClassesprops来设置工具提示的样式SpeedDialAction所有这些类都将传递给Tooltip组件,因为它是在文档中编写的SpeedDialAction

这是来自官方文档的修改示例

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;

现场演示

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