Comment changer la couleur d'arrière-plan des info-bulles MUI ?

Question

J'aimerais qu'un utilisateur "?" puisse survoler l'icône et obtenir des spécifications sur les données à saisir dans le champ de texte. Le survol par défaut de MUI est gris avec du texte blanc, mais je veux que le mien soit blanc avec du texte gris et avec une police plus grande. J'ai trouvé que l'utilisation fonctionne bien pour la taille et la couleur de la police, mais lorsque je change la couleur d'arrière-plan, le champ de texte survolé est entouré d'une bordure grise. Il s'agit du composant hover.js :

exporter la fonction par défaut HoverTip(prop) {
    const {astuce} = accessoire

    retour (
    
                {conseil}
            }
        flèche
        placement="à droite"
        sx={{Taille de la police : '30'}}
        
         >
        
        
        
    
    )

}
Cependant, cela laisse une bordure noire autour de la zone de texte de survol. Une idée de comment résoudre ce problème ?
À quoi ça ressemble
            

Answer 1

Vous pouvez résoudre ce problème en utilisant sx.

Maintenant, j'ai trouvé cela directement dans l'attribut de l'élément 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>
);