小编典典

如何设置Material-UI的工具提示样式?

reactjs

如何为Material-UI的工具提示文本设置样式?悬停时的默认工具提示为黑色,没有文字换行。是否可以更改背景,颜色等?此选项是否可用?


阅读 275

收藏
2020-07-22

共1个答案

小编典典

关于这个问题的另一个流行的答案(由AndréJunges提出)是针对Material-UI的0.x版本。下面,我从Material UI的工具提示-自定义样式中复制了答案,该提示针对v3和v4进行了说明。

以下是如何通过主题覆盖所有工具提示的示例,或仅使用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

2020-07-22