如何设置 MUITooltip文本样式？悬停时的默认工具提示是黑色的，没有文字换行。是否可以更改背景，颜色等？这个选项甚至可用吗？
问问题
71805 次
8 回答
56
这个问题的另一个流行答案（André Junges）是针对 Material-UI 的 0.x 版本。下面我从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及更高版本中使用）。它包括通过主题进行自定义、使用自定义和使用道具进行自定义。所有这些自定义都针对“工具提示槽”，以便将 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
于 2019-02-09T14:06:55.933 回答
14
这个答案已经过时了。这个答案是在 2016 年为 Material-UI 的 0.x 版本编写的。请参阅此答案以了解适用于版本 3 和 4 的方法。
好吧，您可以更改文本颜色和自定义 mui 主题的元素背景。
color- 是文本颜色
rippleBackgroundColor- 是工具提示 bbackground
示例：使用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
尚无法更改标签样式以使其包含多行。
于 2016-04-21T13:49:06.750 回答
10
我也遇到了这个问题，并且希望任何想要简单地更改工具提示颜色的人都能看到这个对我有用的解决方案：
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>
</>
);
};
于 2020-03-11T18:29:17.687 回答
9
如果你想改变 Tooltip 的 text color , font-size ... 有一个简单的方法。
您可以在 Martial Ui Tooltip 的标题内插入标签，例如：
<Tooltip title={<span>YourText</span>}>
<Button>Grow</Button>
</Tooltip>
然后你可以随心所欲地设计你的标签。
检查下面的例子：
于 2019-11-12T08:37:12.530 回答
7
MUI v5 更新
您可以Tooltip通过覆盖工具提示槽中的样式来自定义。在 v5 中有 3 种方法可以做到这一点。有关参考，请参阅 的自定义部分Tooltip。sx更多关于prop的示例，请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',
},
},
},
},
});
于 2021-11-03T08:27:10.730 回答
1
HtmlTooltip 的另一种解决方案
我使用 HtmlTooltip 并添加arrow: {color: '#f5f5f9',},箭头工具提示样式。
还有更多关于工具提示样式本身的内容。
所以我ValueLabelComponent用来控制标签并Tooltip从 MaterialUI 中放一个。
希望它提供另一种编辑 MaterialUI 工具提示的方法:)
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'var(--blue)',
color: 'white',
maxWidth: 220,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
arrow: {
color: '#f5f5f9',
},
}))(Tooltip);
function ValueLabelComponent({ children, open, value }) {
return (
<HtmlTooltip arrow open={open} enterTouchDelay={0} placement="top" title={value}>
{children}
</HtmlTooltip>
);
}
...
...
return (
<div className={classes.root}>
<Slider
value={value}
onChange={handleChange}
onChangeCommitted={handleChangeCommitted}
scale={(x) => convertRangeValueToOriginalValue(x, minMaxObj)}
valueLabelDisplay="auto"
valueLabelFormat={(x) => '$' + x}
ValueLabelComponent={ValueLabelComponent}
aria-labelledby="range-slider"
/>
</div>
);
于 2020-09-04T19:40:46.727 回答
0
我使用makeStyles()并以此结束：
import React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { makeStyles } from '@material-ui/core/styles';
const styles = makeStyles({
tooltip: {
backgroundColor: '#FFFFFF',
color: '#000000',
border: '.5px solid #999999',
fontSize: '.85rem',
fontWeight: '400'
}
});
const HeaderTooltip = ({ header, tooltip }) =>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<Typography variant='h5'>{header}</Typography>
</Grid>
<Grid item>
<Tooltip title={tooltip} classes={{ tooltip: styles().tooltip }}>
<InfoOutlinedIcon />
</Tooltip>
</Grid>
</Grid>
export default HeaderTooltip;
于 2021-10-08T22:26:59.280 回答
0
MUI v5 自定义组件
基于NearHuscarl 的答案，对sx我来说，最简单的方法是创建一个自定义组件以包含样式以及您希望在每个工具提示上重复的任何其他属性。
例如，组件可以在底部显示带有箭头和更大字体的工具提示：
const StyledTooltip = ({ title, children, ...props }) => (
<Tooltip
{...props}
title={title}
placement="bottom"
arrow
componentsProps={{
tooltip: {
sx: {
fontSize: '1.125rem',
},
},
}}
>
{children}
</Tooltip>
);
const Buttons = () => (
<div>
<StyledTooltip title="This is one">
<Button>One</Button>
</StyledTooltip>
<StyledTooltip title="This is two">
<Button>Two</Button>
</StyledTooltip>
</div>
);
于 2021-12-23T21:53:25.603 回答