搜索

首页  >  问答  >  正文

如何更改 MUI 工具提示的背景颜色?

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

全部回复(1)我来回复

  • P粉670107661

    P粉6701076612023-09-05 10:53:39

    您可以使用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>
    );
    

    回复
    0
  • 取消回复