Question

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

Answer 1

这个答案已经过时了。这个答案写于2016年，Material-UI从那时起经历了重大变化。请参阅this answer了解适用于当前版本的方法（目前为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 2

我也遇到了这个问题，并且希望任何想要改变其工具提示颜色的人看到适用于我的解决方案：

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 3

关于这个问题的公认答案似乎已经过时了（这是Material-UI的早期版本）。下面是我从Material UI's Tooltip - Customization Style

中复制的答案

下面是有关如何通过主题覆盖所有工具提示或仅使用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 4

如果要更改文本颜色，工具提示的字体大小...，则有一种简单的方法。

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

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

然后，您可以根据需要随意设置标签样式。

检查以下示例：

Answer 5

使用HtmlTooltip的另一种解决方案

我使用HtmlTooltip并为箭头工具提示样式添加arrow: {color: '#f5f5f9',},。

工具提示样式本身还有很多。

因此，我使用ValueLabelComponent来控制标签，并在MaterialUI中放置一个Tooltip。

希望它为编辑MaterialUI工具提示提供了另一种方法：）

const HtmlTooltip = withStyles((theme) => ({
  tooltip: {
    backgroundColor: 'var(--blue)',
    color: 'white',
    maxWidth: 220,
    fontSize: theme.typography.pxToRem(12),
    border: '1px solid #dadde9',
  },
  arrow: {
    color: '#f5f5f9',
  },
}))(Tooltip);

function ValueLabelComponent({ children, open, value }) {
  return (
    <HtmlTooltip arrow open={open} enterTouchDelay={0} placement="top" title={value}>
      {children}
    </HtmlTooltip>
  );
}

...
...

return (
    <div className={classes.root}>
      <Slider
        value={value}
        onChange={handleChange}
        onChangeCommitted={handleChangeCommitted}
        scale={(x) => convertRangeValueToOriginalValue(x, minMaxObj)}
        valueLabelDisplay="auto"
        valueLabelFormat={(x) => '$' + x}
        ValueLabelComponent={ValueLabelComponent}
        aria-labelledby="range-slider"
      />
    </div>
  );

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

5 个答案:

使用HtmlTooltip的另一种解决方案