如何设置 MUI 工具提示的样式？

Question

如何设置 MUI Tooltip 文本的样式？悬停时的默认工具提示是黑色的，没有文字换行。是否可以更改背景，颜色等？这个选项甚至可用吗？

原文由 codinginnewyork 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题的另一个流行答案（André Junges）是针对 Material-UI 的 0.x 版本。下面我从 Material UI 的 Tooltip - Customization Style 中复制了我的答案，它针对 v3 和 v4 解决了这个问题。再往下，我添加了一个使用 v5 的示例版本。

下面是如何通过主题覆盖所有工具提示的示例，或者使用 withStyles 自定义单个工具提示（两个不同的示例）。第二种方法也可用于创建自定义工具提示组件，您可以重用该组件，而无需强制它在全局范围内使用。

 import React from "react";
import ReactDOM from "react-dom";

import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";

const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        fontSize: "2em",
        color: "yellow",
        backgroundColor: "red"
      }
    }
  }
});
const BlueOnGreenTooltip = withStyles({
  tooltip: {
    color: "lightblue",
    backgroundColor: "green"
  }
})(Tooltip);

const TextOnlyTooltip = withStyles({
  tooltip: {
    color: "black",
    backgroundColor: "transparent"
  }
})(Tooltip);

function App(props) {
  return (
    <MuiThemeProvider theme={defaultTheme}>
      <div className="App">
        <MuiThemeProvider theme={theme}>
          <Tooltip title="This tooltip is customized via overrides in the theme">
            <div style={{ marginBottom: "20px" }}>
              Hover to see tooltip customized via theme
            </div>
          </Tooltip>
        </MuiThemeProvider>
        <BlueOnGreenTooltip title="This tooltip is customized via withStyles">
          <div style={{ marginBottom: "20px" }}>
            Hover to see blue-on-green tooltip customized via withStyles
          </div>
        </BlueOnGreenTooltip>
        <TextOnlyTooltip title="This tooltip is customized via withStyles">
          <div>Hover to see text-only tooltip customized via withStyles</div>
        </TextOnlyTooltip>
      </div>
    </MuiThemeProvider>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以下是有关工具提示 CSS 类的文档，可用于控制工具提示行为的不同方面： https ://material-ui.com/api/tooltip/#css

以下是有关在主题中覆盖这些类的文档： https ://material-ui.com/customization/components/#global-theme-override

---

这是一个类似的示例，但已更新为与 Material-UI v5 一起使用（请注意，经过 一些修复，它可以在 5.0.3 及更高版本中使用）。它包括通过主题进行自定义，使用 styled 进行自定义，以及使用 sx 属性进行自定义。所有这些自定义都针对“工具提示槽”，以便将 CSS 应用于控制工具提示的视觉外观的元素。

 import React from "react";
import ReactDOM from "react-dom";

import { createTheme, ThemeProvider, styled } from "@mui/material/styles";
import Tooltip from "@mui/material/Tooltip";

const defaultTheme = createTheme();
const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: "2em",
          color: "yellow",
          backgroundColor: "red"
        }
      }
    }
  }
});
const BlueOnGreenTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} componentsProps={{ tooltip: { className: className } }} />
))(`
    color: lightblue;
    background-color: green;
    font-size: 1.5em;
`);

const TextOnlyTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} componentsProps={{ tooltip: { className: className } }} />
))(`
    color: black;
    background-color: transparent;
`);

function App(props) {
  return (
    <ThemeProvider theme={defaultTheme}>
      <div className="App">
        <ThemeProvider theme={theme}>
          <Tooltip title="This tooltip is customized via overrides in the theme">
            <div style={{ marginBottom: "20px" }}>
              Hover to see tooltip customized via theme
            </div>
          </Tooltip>
        </ThemeProvider>
        <BlueOnGreenTooltip title="This tooltip is customized via styled">
          <div style={{ marginBottom: "20px" }}>
            Hover to see blue-on-green tooltip customized via styled
          </div>
        </BlueOnGreenTooltip>
        <TextOnlyTooltip title="This tooltip is customized via styled">
          <div style={{ marginBottom: "20px" }}>
            Hover to see text-only tooltip customized via styled
          </div>
        </TextOnlyTooltip>
        <Tooltip
          title="This tooltip is customized via the sx prop"
          componentsProps={{
            tooltip: {
              sx: {
                color: "purple",
                backgroundColor: "lightblue",
                fontSize: "2em"
              }
            }
          }}
        >
          <div>
            Hover to see purple-on-blue tooltip customized via the sx prop
          </div>
        </Tooltip>
      </div>
    </ThemeProvider>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

有关 v4 和 v5 之间主题结构更改的文档： https ://mui.com/guides/migration-v4/#theme

Material-UI 文档中的工具提示自定义示例： https ://mui.com/components/tooltips/#customization

原文由 Ryan Cogswell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

MUI v5 更新

您可以通过覆盖工具提示槽中的样式来自定义 Tooltip 。在 v5 中有 3 种方法可以做到这一点。有关参考，请参阅 Tooltip 的 自定义 部分。 sx prop 和 createTheme 的更多例子可以在 这里 和 这里 看到。

styled()

 const ToBeStyledTooltip = ({ className, ...props }) => (
  <Tooltip {...props} classes={{ tooltip: className }} />
);
const StyledTooltip = styled(ToBeStyledTooltip)(({ theme }) => ({
  backgroundColor: '#f5f5f9',
  color: 'rgba(0, 0, 0, 0.87)',
  border: '1px solid #dadde9',
}));

sx 道具

<Tooltip
  title="Add"
  arrow
  componentsProps={{
    tooltip: {
      sx: {
        bgcolor: 'common.black',
        '& .MuiTooltip-arrow': {
          color: 'common.black',
        },
      },
    },
  }}
>
  <Button>SX</Button>
</Tooltip>

createTheme + ThemeProvider

 const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          backgroundColor: 'pink',
          color: 'red',
          border: '1px solid #dadde9',
        },
      },
    },
  },
});

原文由 NearHuscarl 发布，翻译遵循 CC BY-SA 4.0 许可协议