如何调整Material UI Tooltip字体大小？

Question

我用 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;
  }
}

Answer 1

您可以直接将自定义组件添加到 props title。

如果需要，您可以将任何

inline-styles

添加到刚刚添加的组件中。

包括

font-size

<Tooltip title={<h1 style={{ color: "lightblue" }}>title</h1>}>
  <InfoIcon />
</Tooltip>

---

参考：MUI 工具提示文档：customized-tooltips

Answer 2

您可以在全局级别或组件级别执行此操作。

全球水平

这样应用程序中的所有

Tooltip

都会获得样式。

首先您需要创建一个

theme.js

文件：

'use strict';

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    overrides: {
        MuiTooltip: {
            tooltip: {
                fontSize: "1em",
            },
        },
    },
});

export default theme;

然后将其导入到您的主应用程序组件中，这样它将应用于所有应用程序组件：

'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>
        );
    }
}

组件级别

通过这种方法，您可以为每个组件定义不同的样式。

'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}} />
        );
    }

}

Answer 3

您也可以使用

Typography

并直接设置

fontSize

。一些组件，如

Box

或

Typography

继承了 system props，允许您使用顶级 props 更改样式：

<Tooltip title={<Typography fontSize={30}>title</Typography>}>
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

现场演示

Answer 4

使用MUI v5

这将更改

<ThemeProvider>

内所有工具提示的字体大小

import React from "react";
import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';

const theme = createTheme({
    components: {
        MuiTooltip: {
            styleOverrides: {
                tooltip: {
                    fontSize: '1em'
                }
            }
        }
    }
});

export default function App() {
    return <ThemeProvider theme={theme}>
        {/* Your app content */}
        <CssBaseline />
    </ThemeProvider>;
}

Answer 5

import import React from 'react'
import Tooltip from '@mui/material/Tooltip';

   const App= () => {
    <Tooltip title={<p style={{ fontSize: "15px", margin: "0", padding: "0" 
         }}>Remove all generated history.</p>} arrow>
       <div>Your Text or Element</div>
    </Tooltip>
   }
 export default App