如何设置MUI工具提示的样式? [英] How to style MUI Tooltip?
本文介绍了如何设置MUI工具提示的样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Tooltip
文本的样式?悬停时的默认工具提示显示为黑色,没有文本换行。可以更改背景、颜色等吗?此选项是否可用?
推荐答案
关于这个问题的另一个流行答案(由AndréJunges提供)是针对Material-UI的0.x版本。下面我从Material UI's Tooltip - Customization Style中复制了我的答案,它针对v3和v4解决了这个问题。再往下看,我已经使用v5添加了该示例的一个版本。
下面是如何通过主题覆盖所有工具提示的示例,或者仅使用with Styles自定义单个工具提示的示例(两个不同的示例)。第二种方法还可以用于创建自定义工具提示组件,您可以在不强制全局使用的情况下重用该组件。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以及some fixes之后的更高版本中可用)。它包括通过主题定制、使用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
材质-UI文档中的工具提示自定义示例:https://mui.com/components/tooltips/#customization
这篇关于如何设置MUI工具提示的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文