如何修改悬停在快速拨号组件上时显示的工具提示的字体大小?
链接到 SpeedDial 组件 https://material-ui.com/components/speed-dial/
链接到 Speeddialaction 组件 https://material-ui.com/api/speed-dial-action/
如何修改悬停在快速拨号组件上时显示的工具提示的字体大小?
链接到 SpeedDial 组件 https://material-ui.com/components/speed-dial/
链接到 Speeddialaction 组件 https://material-ui.com/api/speed-dial-action/
您可以通过向组件添加TooltipClasses
props来设置工具提示的样式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 发布在链接上的代码