材质 UI 的工具提示 - 自定义样式 [重复]答案

【问题标题】：Material UI's Tooltip - Customization Style [duplicate]材质 UI 的工具提示 - 自定义样式 [重复]
【发布时间】：2019-07-03 13:01:44
【问题描述】：

如何更改 Material UI 工具提示的背景颜色和颜色。我尝试如下，但它不起作用。

import { createMuiTheme } from '@material-ui/core/styles';
export const theme = createMuiTheme({
tooltip: {
        color: '#ffffff',
        rippleBackgroundColor: 'red'
    }
});

import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import { theme } from "my-path";

<MuiThemeProvider theme={theme} >
<Tooltip
    title={this.props.title}
    placement={this.props.placement} className="customTooltipStyle">
    <em className="fa fa-info-circle"></em>
</Tooltip>
</MuiThemeProvider>

【问题讨论】：

stackoverflow.com/questions/36759985/… 我想这有你需要的..
@S.Haviv - 我已经试过了。它不工作。这就是我问的原因。
另一个答案来自 Material-UI 的早期版本。我也在那个帖子上复制了我的答案，以便更容易找到。

标签： reactjs tooltip material-ui

【解决方案1】：

以下是如何通过主题覆盖所有工具提示或使用 withStyles 自定义单个工具提示的示例（两个不同的示例）。第二种方法也可用于创建自定义工具提示组件，您可以重复使用该组件，而无需强制全局使用。

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

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

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

const TextOnlyTooltip = withStyles({
  tooltip: {
    color: "black",
    backgroundColor: "transparent"
  }
})(Tooltip);

function App(props) {
  return (
    <MuiThemeProvider theme={defaultTheme}>
      <div className="App">
        <MuiThemeProvider theme={theme}>
          <Tooltip title="This tooltip is customized via overrides in the theme">
            <div style={{ marginBottom: "20px" }}>
              Hover to see tooltip customized via theme
            </div>
          </Tooltip>
        </MuiThemeProvider>
        <BlueOnGreenTooltip title="This tooltip is customized via withStyles">
          <div style={{ marginBottom: "20px" }}>
            Hover to see blue-on-green tooltip customized via withStyles
          </div>
        </BlueOnGreenTooltip>
        <TextOnlyTooltip title="This tooltip is customized via withStyles">
          <div>Hover to see text-only tooltip customized via withStyles</div>
        </TextOnlyTooltip>
      </div>
    </MuiThemeProvider>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

这里是关于在主题中覆盖这些类的文档：https://material-ui.com/customization/components/#global-theme-override

【讨论】：