我用Material UI实现了一个工具提示,但是fontSize
太小了。我不能用.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;
}
}
4条答案
按热度按时间f45qwnt81#
您可以直接在 prop title中添加自定义组件。
如果需要,您可以将任何
inline-styles
添加到刚刚添加的组件中。包含
font-size
参考:MUI工具提示文档:自定义工具提示
n3h0vuf22#
您可以在全局级别或组件级别执行此操作。
全局级
这样,应用程序中的所有
Tooltip
都将获得该样式。首先需要创建一个
theme.js
文件:然后将其导入到主应用程序组件中,以便将其应用于所有应用程序组件:
组件级
使用这种方法,您可以为每个组件定义不同的样式。
zmeyuzjn3#
您也可以使用
Typography
并直接设置fontSize
。某些组件(如Box
或Typography
)继承了系统props,允许您使用顶级props更改样式:现场演示
wko9yo5t4#
使用MUI v5
这将更改
<ThemeProvider>
中所有工具提示的字体大小