Размер шрифта всплывающей подсказки в быстром наборе пользовательского интерфейса React's Material - PullRequest
Новая
       6

Размер шрифта всплывающей подсказки в быстром наборе пользовательского интерфейса React's Material

0 голосов
/ 03 июля 2019

Как изменить размер шрифта всплывающей подсказки, отображаемой при наведении на компонент speeddialaction?

Ссылка на компонент SpeedDial https://material -ui.com / components / speed-dial /

Ссылка на компонент Speeddialaction https://material -ui.com / api / speed-dial-action /

Ответы [ 2 ]

2 голосов
/ 03 июля 2019

Вы можете стилизовать всплывающую подсказку, добавив TooltipClasses prop к 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;

LIVE DEMO

0 голосов
/ 04 июля 2019

Я исправил код для SpeedADialAction Example.Code, размещенного на ссылка

...