如何为Material-UI的工具提示文本设置样式?悬停时的默认工具提示为黑色,没有文字换行。是否可以更改背景,颜色等?此选项是否可用?
关于这个问题的另一个流行的答案(由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