如何更改 MUI 工具提示的背景颜色？

Question

我想要一个“？”用户可以将其悬停在图标上并获取有关应在文本字段中输入哪些数据的规范。 MUI 的默认悬停是灰色的，带有白色的文字，但我希望我的悬停是白色的，带有灰色的文字，并且字体更大。我发现使用对于字体大小和颜色效果很好，但是当我更改背景颜色时，悬停文本字段周围有一个灰色边框。这是hover.js 组件：

export default function HoverTip(prop) {
    const { tip } = prop

    return (
    <Tooltip 
        title={
            <Typography 
            fontSize={15} 
            backgroundColor={'#ffff'} 
            color={'#514E6A'}>
                {tip}
            </Typography>}     
        arrow 
        placement="right"
        sx={{fontSize: '30'}}
        
         >
        <IconButton >
        <HelpOutlineIcon />
        </IconButton>
    </Tooltip>
    )

}

但是，这会在悬停文本框周围留下黑色边框。知道如何解决这个问题吗？

Answer 1

您可以使用

sx

来解决此问题。

现在我发现直接在

Tooltip

上使用它不起作用，但您可以使用

tooltip

属性将其传递给实际的

slotProps

元素。

return (
  <Tooltip
    title={<Typography fontSize={15}>{tip}</Typography>}
    arrow
    placement="right"
    sx={{ fontSize: "30" }}
    slotProps={{
      tooltip: {
        sx: {
          color: "#514E6A",
          backgroundColor: "#ffff",
        },
      },
    }}
  >
    <IconButton>
      <HelpOutlineIcon />
    </IconButton>
  </Tooltip>
);

Answer 2

对我来说，在尝试了多种不起作用的解决方案后，我发现这个并且效果很完美：

    <Tooltip
                open={!!tooltipContent}
                title={tooltipContent}
                onClose={hideTooltip}
                style={{
                  position: "fixed",
                  top: tooltipPosition.top,
                  left: tooltipPosition.left,
                }}
                componentsProps={{
                  tooltip: {
                    sx: {
                      bgcolor: state
                        ? ThemeColors.warning
                        : ThemeColors.warningdark,
                    },
                  },
                }}
              >
....
              </Tooltip>