![](/img/trans.png)
[英]When used together, TooltipClasses and FabProps are not working for SpeedDialAction in Material UI React
[英]Font size of tooltip in speeddialaction of React's Material UI
如何修改悬停在快速拨号组件上时显示的工具提示的字体大小?
链接到 SpeedDial 组件https://material-ui.com/components/speed-dial/
链接到 Speeddialaction 组件https://material-ui.com/api/speed-dial-action/
您可以通过添加样式提示TooltipClasses
道具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 发布在链接上的代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.