javascript 如何更改MUI工具提示的背景色？

idfiyjo8 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(190)

我想要一个“？“图标，用户可以将鼠标悬停在该图标上，并获取有关应在文本字段中输入哪些数据的规范。MUI的默认悬停是灰色和白色的单词，但我希望我的悬停是白色和灰色的单词，字体要大一些。我发现使用在字体大小和颜色上效果很好，但是当我改变背景颜色时，悬停文本字段周围有一个灰色的边框。这是hover.js组件：

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>
    )

}

但是，这会在悬停文本框周围留下一个黑色边框。有办法解决吗？what it looks like

JavaScript

来源：https://stackoverflow.com/questions/76335562/how-to-change-the-background-color-of-a-mui-tooltip

1条答案

按热度按时间

igetnqfo1#

您可以使用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）回复(0）举报 2023-05-27

我来回答

javascript 如何更改MUI工具提示的背景色？

1条答案

相关问题

热门标签

最新问答