I implemented a tooltip with MUI but the fontSize
is too small. And I can't change it with a .scss
.
import React from "react";
import "./InfoTooltip.scss";
import InfoIcon from '@material-ui/icons/Info';
import Tooltip from '@material-ui/core/Tooltip';
const InfoTooltip: React.FC<{ children?: any }> = ({ children }) => {
const [label, ...rest] = children;
return (
<div className="info-tooltip-container">
<div className="label-container">
<Tooltip title={label}>
<InfoIcon style={{ fontSize: '24px' }} />
</Tooltip>
</div>
{rest}
</div>
);
};
export default InfoTooltip;
.info-tooltip-container {
.label-container {
font-size: 18px;
}
label {
font-size: 18px;
}
}
You can add a customized component directly to props title .
If needed, you can add whatever inline-styles
to the component you just added.
Include the font-size
<Tooltip title={<h1 style={{ color: "lightblue" }}>title</h1>}>
<InfoIcon />
</Tooltip>
Refer: MUI tooltip document: customized-tooltips
You can do that at global level or at component level .
This way all the Tooltip
s in the application will get the style.
First you need to create a theme.js
file:
'use strict';
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiTooltip: {
tooltip: {
fontSize: "1em",
},
},
},
});
export default theme;
Then import it in your main application component, so it will be applied to all the application components:
'use strict';
import React from "react";
import { ThemeProvider } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from 'theme.js';
export default class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your app content */}
</ThemeProvider>
);
}
}
With this approach you can define a different style for each component.
'use strict';
import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import Tooltip from "@material-ui/core/Tooltip";
const useStyles = makeStyles({
tooltip: {
fontSize: "1em",
},
});
export default class MyComponent extends React.Component {
const classes = useStyles();
render() {
return (
<Tooltip classes={{tooltip: classes.tooltip}} />
);
}
}
You can also use Typography
and set the fontSize
directly. Some components like Box
or Typography
inherit system props which allow you to change the styling using the top-level props:
<Tooltip title={<Typography fontSize={30}>title</Typography>}>
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.