Bagaimana untuk menukar warna latar belakang petua alat MUI?

Question

Saya ingin "?" yang pengguna boleh tuding di atas ikon dan mendapatkan spesifikasi tentang data yang perlu dimasukkan dalam medan teks. Tuding lalai MUI ialah kelabu dengan teks putih, tetapi saya mahu saya menjadi putih dengan teks kelabu dan dengan fon yang lebih besar. Saya mendapati bahawa penggunaan berfungsi dengan baik untuk saiz dan warna fon, tetapi apabila saya menukar warna latar belakang, medan teks tuding mempunyai sempadan kelabu di sekelilingnya. Ini ialah komponen hover.js:

eksport fungsi lalai HoverTip(prop) {
    const { tip } = prop

    kembali (
    <Petua alat
        tajuk={
            <Tipografi
            Saiz fon={15}
            backgroundColor={'#ffff'}
            color={'#514E6A'}>
                {tip}
            </Tipografi>}
        anak panah
        penempatan="kanan"
        sx={{fontSaiz: '30'}}
        
         >
        <IconButton>
        <HelpOutlineIcon />
        </IconButton>
    </Petua alat>
    )

}

Walau bagaimanapun, ini meninggalkan sempadan hitam di sekeliling kotak teks tuding. Sebarang idea bagaimana untuk menyelesaikan masalah ini? Apakah rupanya

Answer 1

Anda boleh menyelesaikan masalah ini menggunakan sx.

Sekarang saya dapati itu secara langsung dalam atribut elemen 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>
);