Wie Stil-Material-UI - tooltip?

Wie kann ich Stil-Material-UI - tooltip-text? Die Standard-QuickInfo auf hover kommt schwarz heraus mit keine text-wrap. Ist es möglich, den hintergrund ändern, Farbe etc? Ist diese option auch verfügbar?

InformationsquelleAutor codinginnewyork | 2016-04-21

  1. 9

    Diese Antwort ist veraltet. Diese Antwort wurde geschrieben im Jahr 2016 und Material-UI Durchlaufen hat wesentliche änderungen, die seit dann. Bitte sehen diese Antwort für ein Konzept, das funktioniert mit der aktuellen version (3.9.2).

    gut, Sie können ändern Sie die text-Farbe und das element hintergrund anpassen der mui Thema.

    color - ist die Farbe für den text

    rippleBackgroundColor - ist der tooltip bbackground

    Beispiel: Mit IconButton - aber man könnte Sie die Tooltip direkt..

    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>
);

    Können Sie auch einen style Objekt für die Tooltip (in IconButton es tooltipStyles) - aber diese Stile werden nur angewendet werden, für das root-element.

    Ist es noch nicht möglich, ändern Sie die label-Stil zu machen, wickeln Sie Sie in mehrere Zeilen.

    InformationsquelleAutor André Junges

  2. 2

    Akzeptierte Antwort auf diese Frage scheint zu sein, out-of-date (es war für eine sehr frühe version des Material-UI). Unten habe ich kopiert habe in meiner Antwort aus Material UI - Tooltip - Anpassungen Stil

    Unten sind Beispiele für das überschreiben aller tooltips über das Thema, oder einfach nur zum anpassen einer einzelnen tooltip mit withStyles. Der zweite Ansatz könnte auch verwendet werden, erstellen Sie einen benutzerdefinierten tooltip-Komponente, die Sie wiederverwenden konnte, ohne Sie zu zwingen, die weltweit genutzt werden.

    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);

    Hier ist ein funktionierendes Beispiel:

    Wie Stil-Material-UI - tooltip?

    Hier ist die Dokumentation, die auf tooltip CSS-Klassen zur Verfügung, um verschiedene Aspekte zu kontrollieren tooltip-Verhalten: https://material-ui.com/api/tooltip/#css

    Hier ist die Dokumentation zum überschreiben diese Klassen in das Thema: https://material-ui.com/customization/themes/#css

    InformationsquelleAutor Ryan Cogswell

Schreibe einen Kommentar