如何设置Material-UI的工具提示样式? [英] How to style Material-UI's tooltip?
问题描述
如何为Material-UI的工具提示文本设置样式?悬停时默认的工具提示显示为黑色,没有文字换行.是否可以更改背景,颜色等?这个选项甚至可用吗?
How can I style Material-UI's tooltip text? The default tooltip on hover comes out black with no text-wrap. Is it possible to change the background, color etc? Is this option even available?
推荐答案
这个问题的另一个流行答案(由AndréJunges提出)是针对Material-UI的0.x版本.下面,我从材料UI的工具提示-自定义样式可以解决v3和v4的问题.
The other popular answer (by André Junges) on this question is for the 0.x versions of Material-UI. Below I've copied in my answer from Material UI's Tooltip - Customization Style which addresses this for v3 and v4.
下面是有关如何通过主题覆盖所有工具提示的示例,或仅使用withStyles自定义单个工具提示的示例(两个不同的示例).第二种方法也可以用于创建自定义工具提示组件,您可以在不强制将其全局使用的情况下重复使用它.
Below are examples of how to override all tooltips via the theme, or to just customize a single tooltip using withStyles (two different examples). The second approach could also be used to create a custom tooltip component that you could reuse without forcing it to be used globally.
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
Here is documentation on tooltip CSS classes available to control different aspects of tooltip behavior: https://material-ui.com/api/tooltip/#css
以下是在主题中覆盖这些类的文档: https://material-ui.com/customization/components/#global-theme-override
Here is documentation on overriding these classes in the theme: https://material-ui.com/customization/components/#global-theme-override
这篇关于如何设置Material-UI的工具提示样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!