Настройка всплывающей подсказки для пользовательского интерфейса материала - PullRequest
Новая
       15

Настройка всплывающей подсказки для пользовательского интерфейса материала

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

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

Я пытался изменить некоторые свойства CSS, такие как ширина, высота, цвет фона, но не смог увидеть эти изменения 

import * as React from 'react';
import { createStyles, withStyles, Tooltip, IconButton } from '@material-ui/core';

const styles = (theme: any) => createStyles({
  tooptip: {
    width: "92px",
    height: "36px",
    borderRadius: "18px",
    boxShadow: "0 20px 80px 0",
    backgroundColor:"red"
  }

});
interface ToolTipProps {

  children?: JSX.Element[] | JSX.Element;
  classes?: { [key:string]: string };

}
function ToolTip({ classes }: ToolTipProps): JSX.Element {

  return (
      <Tooltip title="Tooltip" classes={classes}>
        <div>Hover</div>
      </Tooltip>
  );
}
export default withStyles(styles)(ToolTip);

Мне нужно настроить подсказку

1 Ответ

1 голос
/ 02 июля 2019 
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

const styles = {
    tooltip: {
        width: "92px",
        height: "36px",
        borderRadius: "18px",
        boxShadow: "0 20px 80px 0",
        backgroundColor: "red"
    }
};

const CustomTooltip = withStyles(styles)(Tooltip);

function MyCustomTooltip() {
    return (
        <CustomTooltip title="Tooltip">
             <Button>Custom Tooltip</Button>
        </CustomTooltip>
   );
}

export default MyCustomTooltip;

Демонстрация в реальном времени

Вы должны делать вещи Typescript самостоятельно.Я им не пользуюсь, поэтому не знаю как это сделать :).

...