我用材質UI實現了一個工具提示，但是字體太小了。而且我用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;
  }
}

https://mui.com/material-ui/react-tooltip/

你可以直接在道具標題中添加自定義組件。

如果需要，您可以向剛剛添加的組件添加任何內聯樣式。

包括字體大小

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

請參考:MUI工具提示文檔:自定義工具提示

您可以在全局級別或組件級別執行此操作。

全球一級 這樣，應用程序中的所有工具提示都將獲得該樣式。

首先，您需要創建一個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}} />
        );
    }

}

你也可以使用排版，直接設置字體大小。一些組件，如框或排版繼承系統屬性，允許您使用頂級屬性更改樣式:

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

現場演示

這將改變& lt主題提供者& gt

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