如何设置 MUITooltip文本的样式？悬停时的默认工具提示显示为黑色，没有文本换行。是否可以更改背景、颜色等？这个选项甚至可用吗？
如何设置 MUI 工具提示的样式？
IT技术
reactjs
tooltip
material-ui
formsy-material-ui
2021-04-03 00:40:57
6个回答
关于这个问题的另一个流行答案（由 André Junges 提供）是针对 0.x 版本的 Material-UI。下面我从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及更高版本中使用）。它包括通过主题定制、使用定制和使用props定制。所有这些自定义都针对“工具提示槽”，以便将 CSS 应用于控制工具提示视觉外观的元素。styledsx
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
这个答案已经过时了。这个答案是在 2016 年为 Material-UI 的 0.x 版本编写的。请参阅此答案以了解适用于版本 3 和 4 的方法。
好吧，您可以更改自定义 mui 主题的文本颜色和元素背景。
color - 是文字颜色
rippleBackgroundColor - 是工具提示背景
示例：使用IconButton- 但你可以Tooltip直接..
import React from 'react';
import IconButton from 'material-ui/IconButton';
import MuiThemeProvider from 'material-ui/lib/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
const muiTheme = getMuiTheme({
tooltip: {
color: '#f1f1f1',
rippleBackgroundColor: 'blue'
},
});
const Example = () => (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<IconButton iconClassName="muidocs-icon-custom-github" tooltip="test" />
</MuiThemeProvider>
</div>
);
您还可以为(in it's )传递一个style对象- 但这些样式将仅应用于根元素。TooltipIconButtontooltipStyles
尚无法更改标签样式以使其包含在多行中。
我也遇到了这个问题，并希望任何寻求简单更改工具提示颜色的人都能看到这个对我有用的解决方案：
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';
const useStyles = makeStyles(theme => ({
customTooltip: {
// I used the rgba color for the standard "secondary" color
backgroundColor: 'rgba(220, 0, 78, 0.8)',
},
customArrow: {
color: 'rgba(220, 0, 78, 0.8)',
},
}));
export default TooltipExample = () => {
const classes = useStyles();
return (
<>
<Tooltip
classes={{
tooltip: classes.customTooltip,
arrow: classes.customArrow
}}
title="Delete"
arrow
>
<Button color="secondary"><DeleteIcon /></Button>
</Tooltip>
</>
);
};
如果你想改变 Tooltip 的 text color , font-size ... ，有一个简单的方法。
您可以在武术 Ui 工具提示的标题中插入一个标签，例如：
<Tooltip title={<span>YourText</span>}>
<Button>Grow</Button>
</Tooltip>
然后你可以随意设计你的标签。
检查下面的例子：
MUI v5 更新
您可以Tooltip通过覆盖工具提示插槽中的样式来自定义。在 v5 中有 3 种方法可以做到这一点。如需参考，请参阅 的自定义部分Tooltip。更多sxprops示例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',
},
},
},
},
});