Question

我正在尝试针对反应故事书自定义材料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主题的情况

自定义材质UI工具提示

2 个答案: