Блог

я использую компонент пользовательского интерфейса материала быстрого набора, и я хочу применить некоторый стиль к всплывающим подсказкам

   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>
    );
}

  

в документах material Ui предлагается использовать TooltipClasses props для передачи стилей во всплывающую подсказку,

но это не влияет на стиль всплывающей подсказки SpeedDialAction

любая помощь, пожалуйста?

Если вы, как и в моем случае, хотите избежать отображения многострочных меток всплывающих подсказок, а решения других не сработали, это сработало за меня.

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

В идеале есть два способа сделать это.

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 компонентом

Тему можно переопределить, чтобы изменения стиля применялись ко всем экземплярам SpeedDialAction. Поскольку параметр tooltipOpen передан, вам нужно настроить staticTooltipLabel:

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

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