MUI ツールチップの背景色を変更するにはどうすればよいですか?

Question

「?」ユーザーがアイコンの上にカーソルを置くと、テキスト フィールドに入力するデータの指定が表示されるようにしたいと考えています。 MUI のデフォルトのホバーはグレーに白のテキストですが、私は白にグレーのテキストで、より大きなフォントを使用したいと考えています。を使用すると、フォントのサイズと色が正常に機能することがわかりましたが、背景色を変更すると、ホバーテキストフィールドの周囲に灰色の境界線が表示されます。これは hover.js コンポーネントです:

デフォルト関数 HoverTip(prop) をエクスポート {
    const { ヒント } = 小道具

    戻る （
    <ツールチップ
        タイトル={
            <タイポグラフィー
            フォントサイズ={15}
            背景色={'#ffff'}
            color={'#514E6A'}>
                {ヒント}
            </タイポグラフィ>}
        矢印
        配置=「右」
        sx={{fontSize: '30'}}
        
         >
        <アイコンボタン>
        <ヘルプアウトラインアイコン />
        </アイコンボタン>
    </ツールチップ>
    ）

}

ただし、これによりホバー テキスト ボックスの周囲に黒い境界線が残ります。この問題を解決する方法はありますか? それはどのように見えますか

Answer 1

sx を使用すると、この問題を解決できます。

これを Tooltip で直接使用しても機能しないことがわかりましたが、slotProps を使用して実際の tooltip 要素プロパティに渡すことができます。 。

リーリー