Wie ändere ich die Hintergrundfarbe von MUI-Tooltips?

Question

Ich hätte gerne ein „?“, damit der Benutzer mit der Maus über das Symbol fahren kann und Angaben dazu erhält, welche Daten in das Textfeld eingegeben werden sollen. Der Standard-Hover von MUI ist grau mit weißem Text, aber ich möchte, dass mein Hover weiß mit grauem Text und mit einer größeren Schriftart ist. Ich habe festgestellt, dass die Verwendung für Schriftgröße und -farbe gut funktioniert, aber wenn ich die Hintergrundfarbe ändere, wird das Hover-Textfeld von einem grauen Rand umgeben. Dies ist die hover.js-Komponente:

Standardfunktion exportieren HoverTip(prop) {
    const { tip } = prop

    zurückkehren (
    <Tooltip
        Titel={
            <Typografie
            Schriftartgröße={15}
            Hintergrundfarbe={'#ffff'}
            color={'#514E6A'}>
                {Tipp}
            </Typografie>}
        Pfeil
        Platzierung="rechts"
        sx={{fontSize: '30'}}
        
         >
        <IconButton>
        <HelpOutlineIcon />
        </IconButton>
    </Tooltip>
    )

}

Dadurch bleibt jedoch ein schwarzer Rand um das Hover-Textfeld zurück. Irgendeine Idee, wie man dieses Problem lösen kann? Wie sieht es aus

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