Material UI - Как полностью удалить фон \ цвет из всплывающей подсказки

Question

В настоящее время я работаю со всплывающей подсказкой Material UI и не могу понять, как сделать фон подсказки полностью прозрачным. По умолчанию присутствует серый фон с белым текстом. Изменение цвета фона подсказок изменяет цвет фона дочернего элемента, поскольку подсказка является родительским элементом в этом контексте.

Я пробовал это

 <Tooltip title="Add" classes={{
    tooltip: "backgroundColor: transparent"

  }} aria-label="add">
    <Fab color="transparent" className={classes.fab}>
      <AddIcon />
    </Fab>
  </Tooltip>

И это:

<Tooltip title="Add" style={{backgroundColor: "transparent"}} aria-label="add">
    <Fab color="transparent" className={classes.fab}>
      <AddIcon />
    </Fab>
  </Tooltip>

Моя цель - не задевать фон всплывающей подсказки. Я просто хочу увидеть текст.

Answer 1

Так как вам нужен только текст при наведении курсора без фона всплывающей подсказки.

Определите стиль следующим образом:

const useStylesBootstrap = makeStyles(theme => ({
  tooltip: {
    backgroundColor: "transparent",
    color: theme.palette.common.black
  }
}));

Используйте его в своем компоненте React следующим образом:

const tooltipClass = useStylesBootstrap();

return (
  <Tooltip title="Add" classes={tooltipClass} aria-label="add">
    <Fab color="transparent" className={classes.fab}>
      <AddIcon />
    </Fab>
  </Tooltip>
);

Answer 2

Существует несколько способов настройки компонентов, как описано в документации :

1. Спецификация c вариант для одноразовой ситуации
2. Dynami c вариация для одноразовой ситуации
3. Спецификация c вариация компонента, повторно используемого в разных контекстах
4. Варианты конструкции материала, например, с компонентом кнопки
5. Глобальная вариация темы

Похоже, вы хотите использовать первый метод и переопределить стиль с классом . Для этого мы будем использовать makeStyles и определить background для tooltip, что-то вроде этого:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';

const useStyles = makeStyles({
  tooltip: {
    background: 'transparent',
  },
});

export default function ClassesNesting() {
  const classes = useStyles();

  return (
    <Tooltip
      classes={classes}
    >
      Button
    </Tooltip>
  );
}