问题描述
如何修改将鼠标悬停在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 Componenthttps://material-ui.com/components/speed-dial/
链接到Speeddialaction组件 https://material-ui.com/api/speed-dial-action/
Link to Speeddialaction componenthttps://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的快速拨号中工具提示的字体大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!