Подсказка пользовательского интерфейса материала - стиль настройки

Question

Как я могу изменить цвет фона и цвет для всплывающей подсказки пользовательского интерфейса. Я пытался, как показано ниже, но это не работает.

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>

Answer 1

Ниже приведены примеры того, как переопределить все всплывающие подсказки с помощью темы или просто настроить отдельную подсказку с помощью 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/

Вот документация по переопределению этих классов в теме: https://material-ui.com/customization/themes/