自定义材质 UI 工具提示

Question

我正在尝试为 react 故事书自定义材料 ui 工具提示

我尝试更改一些 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);

我需要自定义工具提示

Answer 1

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;

Live demo

你必须自己做 Typescript 的东西。我不使用它，所以我不知道应该怎么做:)。

Answer 2

另一种自定义 material-ui 组件的方法是使用主题。

import { createMuiTheme } from "@material-ui/core/styles";

import lightGreen from "@material-ui/core/colors/lightGreen";
import lime from "@material-ui/core/colors/lime";
import teal from "@material-ui/core/colors/teal";
import yellow from "@material-ui/core/colors/yellow";
import deepOrange from "@material-ui/core/colors/deepOrange";

export default createMuiTheme({
  palette: {
    primary: lime,
    secondary: teal,
    error: deepOrange,
    action: {
      disabledBackground: teal[400]
    },
    text: {
      primary: lightGreen[900],
      secondary: teal[700],
      disabled: yellow[600]
    }
  },
  status: {
    danger: "orange"
  }
});

然后将你的应用/组件实现包装在material-ui ThemeProvider

import GardenTheme from './themes';
/* your story / component code */
return (
  <ThemeProvider theme={GardenTheme}>
    /* tooltip */
  </ThemeProvider>
);

我在媒体link写了一篇关于material-ui主题使用的短文