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