Material UI SpeedDial |如何自定义工具提示

Question

我使用快速拨号材质 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 工具提示样式

请问有什么帮助吗？

Answer 1

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

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}
/>

Answer 2

可以覆盖主题，以便将样式更改应用于 SpeedDialAction 的所有实例。由于传递了 tooltipOpen 参数，您需要定位 staticTooltipLabel：

const theme = createMuiTheme({
  overrides: {
    MuiSpeedDialAction: {
      staticTooltipLabel: {
        backgroundColor : 'red',
        width : 150,
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Answer 3

理想情况下有两种方法可以做到这一点。

1. 当您希望工具提示与悬停项目一起打开时。如果您查看官方材料文档。您需要为

   staticTooltipLabel 

   添加样式。您可以使用这样的方法来做到这一点。请记住，当

   tooltipOpen 

   设置为 true 时，此功能有效。

请务必添加

const useStyles = makeStyles((theme) => ({
  staticTooltipLabel: {
    backgroundColor: "red"
  }
}));

// then pass classes to classess

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

如果您的

tooltipOpen

未设置为默认值。然后你的代码只需要你通过就可以工作

TooltipClasses={classes}

这是演示：https://codesandbox.io/s/material-demo-forked-nexgi?file=/demo.js

尝试删除

tooltipOpen 

以了解工具提示在具有

SpeedDial

组件的材质中如何工作

Answer 4

正如您从文档中看到的那样，staticTooltip仅在

tooltipOpen

为

true

时应用，因此为了仅在悬停时触发工具提示并应用自定义样式，您可以使用

 TooltipClasses

像这样

const useStyles = makeStyles((theme) => ({
  tooltip: {
    backgroundColor: "red"
  }
}));

// then pass the custom style to `TooltipClasses`

<SpeedDialAction
   key={action.name}
   icon={action.icon}
   tooltipTitle={action.name}
   onClick={handleClose}
   TooltipClasses = {{
       tooltip: classes.tooltip
   }}
/>