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

全員に返信(1)
P粉670107661

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

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート