时间戳

首页 > 解决方案 > 材质 UI 快速拨号 | 如何自定义工具提示

reactjs - 材质 UI 快速拨号 | 如何自定义工具提示

问题描述

我使用快速拨号材料 Ui 组件，我想对工具提示应用一些样式

  import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Backdrop from '@material-ui/core/Backdrop';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';

const useStyles = makeStyles((theme) => ({
    tooltips : {
        backgroundColor : "red",
        width : 150

    }
}));

const actions = [
    { icon: <FileCopyIcon />, name: 'Copy' },
    { icon: <SaveIcon />, name: 'Ajouter Voiture' },
    { icon: <PrintIcon />, name: 'Print' },
    { icon: <ShareIcon />, name: 'Share' },
    { icon: <FavoriteIcon />, name: 'Like' },
];

export default function SpeedDialTooltipOpen() {
    const classes = useStyles();
    return (
            <SpeedDial
                ariaLabel="SpeedDial tooltip example"
                className={classes.speedDial}
                hidden={hidden}
                icon={<SpeedDialIcon />}
                onClose={handleClose}
                onOpen={handleOpen}
                open={open}
            >
                {actions.map((action) => (
                    <SpeedDialAction
                        TooltipClasses={classes.tooltips}
                        key={action.name}
                        icon={action.icon}
                        tooltipTitle={action.name}
                        tooltipOpen
                        onClick={handleClose}
                    />
                ))}
            </SpeedDial>
    );
}

在材料 Ui 文档中建议使用 TooltipClasses 道具将样式传递给工具提示，

但这不会影响 SpeedDialAction 工具提示样式

请问有什么帮助吗？

标签： reactjsmaterial-ui

解决方案

如果您像我的情况一样，想避免显示多行工具提示标签而其他人的解决方案不起作用，那么这对我来说就可以了。

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        StaticTooltipLabel: {
        whiteSpace: "nowrap",
        maxWidth: "none",
      },
    /// speed dial stuff
}


//your stuff

<SpeedDialAction
     classes={{ staticTooltipLabel: styles.StaticTooltipLabel }}
     key={action.name}
     icon={action.icon}
     tooltipTitle={action.name}
     tooltipOpen
     onClick={handleClose}
/>

推荐阅读