React的Material UI的快速拨号中工具提示的字体大小 [英] Font size of tooltip in speeddialaction of React's Material UI

问题描述

如何修改将鼠标悬停在speeddialaction组件上时显示的工具提示的字体大小?

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

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

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

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

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

推荐答案

您可以通过在SpeedDialAction组件中添加TooltipClasses prop来设置工具提示的样式.所有这些类都将传递给Tooltip组件，因为它是用SpeedDialAction 文档

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;

实时演示

这篇关于React的Material UI的快速拨号中工具提示的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！