如何更改 MUI 工具提示的背景颜色?
P粉147045274
P粉147045274 2023-09-04 11:56:50
[React讨论组]
<p>我想要一个“?”用户可以将其悬停在图标上并获取有关应在文本字段中输入哪些数据的规范。 MUI 的默认悬停是灰色的,带有白色的文字,但我希望我的悬停是白色的,带有灰色的文字,并且字体更大。我发现使用对于字体大小和颜色效果很好,但是当我更改背景颜色时,悬停文本字段周围有一个灰色边框。这是hover.js 组件:</p> <pre class="brush:php;toolbar:false;">export default function HoverTip(prop) { const { tip } = prop return ( &lt;Tooltip title={ &lt;Typography fontSize={15} backgroundColor={'#ffff'} color={'#514E6A'}&gt; {tip} &lt;/Typography&gt;} arrow placement=&quot;right&quot; sx={{fontSize: '30'}} &gt; &lt;IconButton &gt; &lt;HelpOutlineIcon /&gt; &lt;/IconButton&gt; &lt;/Tooltip&gt; ) }</pre> <p>但是,这会在悬停文本框周围留下黑色边框。知道如何解决这个问题吗? 它看起来像什么</p>
P粉147045274
P粉147045274

全部回复(1)
P粉670107661

您可以使用sx解决此问题。

现在我发现直接在 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>
);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号