如何调整Material UI Tooltip字体大小？SCSS修改无效求助

I get it, trying to override MUI's default styles with plain SCSS can be tricky—their styling system has specific priority rules that often block custom styles from taking effect. Let's break down why your current SCSS isn't working and fix this step by step.

Why Your SCSS Isn't Working #

Your current selectors target .label-container and label, but the Tooltip's text is rendered in a separate element with MUI's own class names (like MuiTooltip-tooltip). Your styles aren't targeting that element, and even if they did, MUI's inline or injected styles have higher specificity.

Solution 1: Use MUI's styled Component (Recommended for MUI v5+) #

This is the cleanest way to customize MUI components since it integrates directly with their styling system.

import React from "react";
import "./InfoTooltip.scss";
import InfoIcon from '@material-ui/icons/Info';
import Tooltip from '@material-ui/core/Tooltip';
import { styled } from '@mui/material/styles';

// Create a custom Tooltip with adjusted font size
const CustomTooltip = styled(Tooltip)`
  & .MuiTooltip-tooltip {
    font-size: 18px;
    // Add any other styles here, like padding or background color
  }
`;

const InfoTooltip: React.FC<{ children?: any }> = ({ children }) => {
  const [label, ...rest] = children;
  return (
    <div className="info-tooltip-container">
      <div className="label-container">
        <CustomTooltip title={label}>
          <InfoIcon style={{ fontSize: '24px' }} />
        </CustomTooltip>
      </div>
      {rest}
    </div>
  );
};
export default InfoTooltip;

Solution 2: Use the sx Prop for Quick Adjustments #

If you don't want to create a separate styled component, the sx prop lets you add styles directly to the Tooltip:

// Inside your component
<Tooltip 
  title={label}
  sx={{
    '& .MuiTooltip-tooltip': {
      fontSize: '18px',
    }
  }}
>
  <InfoIcon style={{ fontSize: '24px' }} />
</Tooltip>

Solution 3: Fix Your SCSS with Higher Specificity #

If you prefer sticking with SCSS, you need to target the actual Tooltip text element and use a selector with enough specificity to override MUI's styles:

.info-tooltip-container {
  .label-container {
    font-size: 18px;

    // Target the Tooltip's text element directly
    & .MuiTooltip-tooltip {
      font-size: 18px;
      // Add !important only if specificity still isn't enough (use sparingly)
      // font-size: 18px !important;
    }
  }
}

Note: Use !important only as a last resort—relying on proper selector specificity is always better practice.

Solution 4: Customize the Tooltip Theme (Global Change) #

If you want this font size to apply to all Tooltips in your app, you can customize the MUI theme:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: '18px',
        },
      },
    },
  },
});

// Wrap your app (or component) in the ThemeProvider
<ThemeProvider theme={theme}>
  <InfoTooltip>...</InfoTooltip>
</ThemeProvider>

Any of these methods should fix the font size issue. I'd recommend the styled component or sx prop approach since they're the most idiomatic for MUI v5.

内容的提问来源于stack exchange，提问作者Ferma