reactjs - Material UI 的工具提示 - 自定义样式
问题描述
如何更改 Material UI 的 Tooltip 的背景颜色和颜色。我尝试如下,但它不工作。
import { createMuiTheme } from '@material-ui/core/styles';
export const theme = createMuiTheme({
tooltip: {
color: '#ffffff',
rippleBackgroundColor: 'red'
}
});
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import { theme } from "my-path";
<MuiThemeProvider theme={theme} >
<Tooltip
title={this.props.title}
placement={this.props.placement} className="customTooltipStyle">
<em className="fa fa-info-circle"></em>
</Tooltip>
</MuiThemeProvider>
解决方案
下面是如何通过主题覆盖所有工具提示的示例,或者使用 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
推荐阅读
- coldfusion - 如何将 listAppend() 与空数组值一起使用?(冷融合)
- wordpress - Wordpress 短代码返回带有短代码的 html 字符串
- spring - 如何在 Spring Boot Redis Session 实现中捕获 Redis 连接失败?
- javascript - 使用 jQuery 将数据从 API 排序到表
- c# - C# 字符串中的文本替换
- memcached - Memcached lru_crawler 元转储不返回 END 作为响应
- python - 如何在硒中找到xpath
- regex - 正则表达式用数字加星号,然后是数字或一个字母
- github - GitHub Action“set-env”导致“没有这样的文件或目录”
- json - 如何从符合条件的 JSON 输出中选择多个参数并进一步选择单个值