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

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

0 голосов
/ 09 февраля 2019

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

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>

1 Ответ

0 голосов
/ 09 февраля 2019

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

Вот рабочий пример:

Edit 3xx46v9015

Вот документация по классам CSS для всплывающей подсказки, доступная для управления различными аспектами поведения подсказки: https://material -ui.com / api / tooltip / # css

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

...