web-dev-qa-db-fra.com

Comment styliser l'info-bulle Material-UI?

Comment puis-je styliser le texte de l'infobulle Material-UI? L'info-bulle par défaut au survol apparaît en noir sans retour à la ligne. Est-il possible de changer l'arrière-plan, la couleur, etc.? Cette option est-elle même disponible?

reactjstooltipmaterial-uiformsy-material-ui
16
codinginnewyork

La réponse acceptée à cette question semble être obsolète (c'était pour une version très précoce de Material-UI). Ci-dessous, j'ai copié ma réponse de Info-bulle de l'interface utilisateur matérielle - Style de personnalisation

Vous trouverez ci-dessous des exemples de la façon de remplacer toutes les info-bulles via le thème, ou de simplement personnaliser une seule info-bulle à l'aide de withStyles. La deuxième approche pourrait également être utilisée pour créer un composant d'infobulle personnalisé que vous pourriez réutiliser sans le forcer à être utilisé globalement.

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

Voici un exemple de travail:

Edit 3xx46v9015

Voici la documentation sur les classes CSS d'info-bulles disponibles pour contrôler différents aspects du comportement des info-bulles: https://material-ui.com/api/tooltip/#css

Voici la documentation sur la substitution de ces classes dans le thème: https://material-ui.com/customization/themes/#css

6
Ryan Cogswell

Cette réponse est obsolète. Cette réponse a été écrite en 2016 et Material-UI a subi des changements importants depuis lors. Veuillez consulter cette réponse pour une approche qui fonctionne avec la version actuelle (3.9.2 pour le moment).

eh bien, vous pouvez changer la couleur du texte et l'arrière-plan de l'élément en personnalisant le thème de l'interface utilisateur.

color - est la couleur du texte

rippleBackgroundColor - est le retour en arrière de l'info-bulle

Exemple: Utilisation de IconButton - mais vous pouvez directement 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>
);

Vous pouvez également passer un objet style pour Tooltip (dans IconButton c'est tooltipStyles) - mais ces styles ne seront appliqués que pour l'élément racine.

Il n'est pas encore possible de changer le style d'étiquette pour le faire envelopper sur plusieurs lignes.

10
André Junges