如何更改 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 上使用它不起作用，但您可以使用 slotProps 將其傳遞給實際的 tooltip 元素屬性。

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