MUI ツールチップの背景色を変更するにはどうすればよいですか?
P粉147045274
2023-09-04 11:56:50
<p>「?」ユーザーがアイコンの上にカーソルを置くと、テキスト フィールドに入力するデータの指定が表示されるようにしたいと考えています。 MUI のデフォルトのホバーはグレーに白のテキストですが、私は白にグレーのテキストで、より大きなフォントを使用したいと考えています。を使用すると、フォントのサイズと色が正常に機能することがわかりましたが、背景色を変更すると、ホバーテキストフィールドの周囲に灰色の境界線が表示されます。これは hover.js コンポーネントです: </p>
<pre class="brush:php;toolbar:false;">デフォルト関数 HoverTip(prop) をエクスポート {
const { ヒント } = 小道具
戻る (
<ツールチップ
タイトル={
<タイポグラフィー
フォントサイズ={15}
背景色={'#ffff'}
color={'#514E6A'}>
{ヒント}
</タイポグラフィ>}
矢印
配置=「右」
sx={{fontSize: '30'}}
>
<アイコンボタン>
<ヘルプアウトラインアイコン />
</アイコンボタン>
</ツールチップ>
)
}</pre>
<p>ただし、これによりホバー テキスト ボックスの周囲に黒い境界線が残ります。この問題を解決する方法はありますか?
それはどのように見えますか</p>
sx
を使用すると、この問題を解決できます。これを
リーリーTooltip
で直接使用しても機能しないことがわかりましたが、slotProps
を使用して実際のtooltip
要素プロパティに渡すことができます。 。