如何设置Material-UI的工具提示样式？

Question

如何设置Material-UI的工具提示文本样式？悬停时的默认工具提示为黑色,没有文本换行.是否可以改变背景,颜色等？这个选项是否可用？

Answer 1

MUI v5 更新

您可以Tooltip通过覆盖工具提示槽中的样式来自定义。在 v5 中有 3 种方法可以做到这一点。有关参考，请参阅 的自定义部分Tooltip。更多sxprop 和的例子可以在这里和这里createTheme看到。

styled()

const ToBeStyledTooltip = ({ className, ...props }) => (
  <Tooltip {...props} classes={{ tooltip: className }} />
);
const StyledTooltip = styled(ToBeStyledTooltip)(({ theme }) => ({
  backgroundColor: '#f5f5f9',
  color: 'rgba(0, 0, 0, 0.87)',
  border: '1px solid #dadde9',
}));

sx支柱

<Tooltip
  title="Add"
  arrow
  componentsProps={{
    tooltip: {
      sx: {
        bgcolor: 'common.black',
        '& .MuiTooltip-arrow': {
          color: 'common.black',
        },
      },
    },
  }}
>
  <Button>SX</Button>
</Tooltip>

createTheme+ThemeProvider

const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          backgroundColor: 'pink',
          color: 'red',
          border: '1px solid #dadde9',
        },
      },
    },
  },
});

Answer 2

这个答案已经过时了.这个答案写于2016年,Material-UI从那时起经历了重大变化.请参阅此答案,了解适用于当前版本的方法(目前为3.9.2).

好吧,你可以改变文本颜色和自定义mui主题的元素背景.

color - 是文字颜色

rippleBackgroundColor - 是工具提示bbackground

示例:使用IconButton- 但你可以Tooltip直接..

import React from 'react';
import IconButton from 'material-ui/IconButton';
import MuiThemeProvider from 'material-ui/lib/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

const muiTheme = getMuiTheme({
  tooltip: {
    color: '#f1f1f1',
    rippleBackgroundColor: 'blue'
  },
});

const Example = () => (
  <div>
    <MuiThemeProvider muiTheme={muiTheme}>
        <IconButton iconClassName="muidocs-icon-custom-github" tooltip="test" />
    </MuiThemeProvider>
  </div>
);

您也可以style为Tooltip(在IconButton它中tooltipStyles)传递一个对象- 但这些样式仅适用于根元素.

现在还不可能改变标签样式以使其包裹多行.

Answer 3

我也遇到了这个问题，并希望任何寻求简单更改工具提示颜色的人都能看到这个对我有用的解决方案：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';

const useStyles = makeStyles(theme => ({
  customTooltip: {
    // I used the rgba color for the standard "secondary" color
    backgroundColor: 'rgba(220, 0, 78, 0.8)',
  },
  customArrow: {
    color: 'rgba(220, 0, 78, 0.8)',
  },
});

export default TooltipExample = () => {
  const classes = useStyles();

  return (
    <>
      <Tooltip
        classes={{
          tooltip: classes.customTooltip,
          arrow: classes.customArrow
        }}
        title="Delete"
        arrow
      >
        <Button color="secondary"><DeleteIcon /></Button>
      </Tooltip>
    </>
  );
};

Answer 4

关于这个问题的公认答案似乎已经过时了（这是Material-UI的早期版本）。下面是我从Material UI的工具提示-自定义样式中复制的答案

以下示例说明如何通过主题覆盖所有工具提示，或者仅使用withStyles自定义单个工具提示。第二种方法也可以用于创建自定义工具提示组件，您可以在不强制将其全局使用的情况下重复使用它。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";

const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        fontSize: "2em",
        color: "yellow",
        backgroundColor: "red"
      }
    }
  }
});
const styles = {
  tooltip: {
    color: "lightblue",
    backgroundColor: "green"
  }
};

function App(props) {
  return (
    <div className="App">
      <MuiThemeProvider theme={theme}>
        <Tooltip title="This tooltip is customized via overrides in the theme">
          <div>Hover to see tooltip</div>
        </Tooltip>
      </MuiThemeProvider>
      <Tooltip
        classes={props.classes}
        title="This tooltip is customized via withStyles"
      >
        <div>Hover to see tooltip</div>
      </Tooltip>
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

这是一个工作示例：

这是有关工具提示CSS类的文档，可用于控制工具提示行为的不同方面：https : //material-ui.com/api/tooltip/#css

这是有关在主题中覆盖这些类的文档：https : //material-ui.com/customization/themes/#css

Answer 5

如果你想改变 Tooltip 的 text color , font-size ... 有一个简单的方法。

您可以在武术 Ui 工具提示的标题中插入一个标签，例如：

<Tooltip title={<span>YourText</span>}>
   <Button>Grow</Button>
</Tooltip>

然后你可以随意设计你的标签。

检查下面的例子：