如何修改Material UI Tooltip的背景色与文字色？现有代码未生效

你当前代码的问题在于主题配置的结构不正确——Material UI v4中，组件的自定义样式需要放在overrides字段下的对应组件名（MuiTooltip）中，而不是直接在主题根层级写tooltip。下面给你两种可行的解决方案：

方案一：通过主题overrides全局修改Tooltip样式 #

修改你的主题配置，按照MUI的正确结构来定义Tooltip的样式：

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

export const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        backgroundColor: 'red', // 设置背景色
        color: '#ffffff', // 设置文字色
        // 可选：额外调整样式，比如字体大小、圆角
        fontSize: '14px',
        borderRadius: '4px'
      }
    }
  }
});

你的MuiThemeProvider和Tooltip的使用方式保持不变即可，这样全局所有Tooltip都会自动应用这个样式。

方案二：通过自定义className局部修改 #

如果你只需要给特定Tooltip应用样式，可以利用你已经添加的customTooltipStyle类，但要注意Tooltip的弹出框是挂载在body下的，需要用深度选择器穿透样式：

在CSS文件中编写：

.customTooltipStyle .MuiTooltip-tooltip {
  background-color: red;
  color: #ffffff;
}

如果使用CSS Modules，则需要加上:global关键字：

.customTooltipStyle :global(.MuiTooltip-tooltip) {
  background-color: red;
  color: #ffffff;
}

这种方式只会影响添加了customTooltipStyle类的Tooltip，适合局部样式调整。

为什么原来的代码不生效？ #

Material UI的主题系统中，根层级的tooltip并不是有效配置项。组件样式需要放在overrides下对应组件的样式对象中，或者通过palette.tooltip修改预设颜色变量（但灵活性不如overrides）。比如用palette的写法：

export const theme = createMuiTheme({
  palette: {
    tooltip: {
      backgroundColor: 'red',
      textColor: '#ffffff'
    }
  }
});

不过更推荐用overrides的方式，能更灵活地控制Tooltip的各类样式细节。

内容的提问来源于stack exchange，提问作者Sandar Min Aye