自定义样式的 MUI 图标按钮不适用于工具提示

Posted 2023-03-15

【中文标题】自定义样式的 MUI 图标按钮不适用于工具提示

【英文标题】：Custom styled MUI IconButton does not work with tooltop

【发布时间】：2021-12-20 13:44:14

【问题描述】：

我已经设置了 IconButton 的样式，所以看起来我需要我现在遇到的问题是，当我使用 ToolTip 时，它不会出现在我的按钮附近，而是出现在页面的左上角。

我做错了什么？

import  styled  from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import  motion  from "framer-motion"

export const Colors = ['#58b864', '#91d704', '#9ad436', '#fd9828', '#ff7826', '#fc4a41', '#e01f1f', '#4065ac', '#4065ac', '#4065ac', '#4065ac'];

const Button = (props, Component) => 
    const  color, greyed, children, className, icon, ...other  = props;

    const StyledButton = styled(IconButton)(( theme ) => (
        borderRadius: '18%',
        height: '26px',
        width: '26px',
        fontSize: '15px',
        backgroundColor: greyed ? '#293357' : color,
        color: greyed ? (theme.palette.mode === 'dark' ? '#63697d' : '#bebebe') : '#fff' , //?  : theme.palette.grey[50]
        '& svg': 
            fontSize: '16px'
        ,
        '&:hover': 
            color: '#fff',
            backgroundColor: color,
            filter: icon ? 'none' : 'brightness(1.2)',
            cursor: icon ? 'default' : 'pointer'
        ,
        '&.Mui-disabled': 
            backgroundColor: '#293357',
            color: '#666979'
        
    ));

    return (
        <StyledButton
            ...other
            component=icon ? null : motion.div
            whileHover=
                scale: 1.1,
                transition:  duration: 0.3 
            
            whileTap= scale: 0.9 
        >
            children
        </StyledButton>
    )


export default Button;

更新： 我发现这适用于工具提示：

const properties = ['color', 'greyed', 'icon']

const Button = styled(IconButton,  shouldForwardProp: (prop) => !properties.includes(prop))
    (( theme, color, greyed, icon ) => (
    borderRadius: '18%',
    height: '26px',
    width: '26px',
    fontSize: '15px',
    backgroundColor: greyed ? '#293357' : color,
    color: greyed ? (theme.palette.mode === 'dark' ? '#63697d' : '#bebebe') : '#fff' ,
    '& svg': 
        fontSize: '16px'
    ,
    '&:hover': 
        color: '#fff',
        backgroundColor: color,
        filter: icon ? 'none' : 'brightness(1.2)',
        cursor: icon ? 'default' : 'pointer'
    ,
    '&.Mui-disabled': 
        backgroundColor: '#293357',
        color: '#666979'
    
));

但后来我不明白如何从运动成帧器全局应用动画。请帮忙，我错过了什么？

【参考方案1】：

我加position:"relative"试试看。

      const StyledButton = styled(IconButton)(( theme ) => (
position:"relative",
        borderRadius: '18%',
        height: '26px',
        width: '26px',
        fontSize: '15px',
        backgroundColor: greyed ? '#293357' : color,
        color: greyed ? (theme.palette.mode === 'dark' ? '#63697d' : '#bebebe') : '#fff' , //?  : theme.palette.grey[50]
        '& svg': 
            fontSize: '16px'
        ,
        '&:hover': 
            color: '#fff',
            backgroundColor: color,
            filter: icon ? 'none' : 'brightness(1.2)',
            cursor: icon ? 'default' : 'pointer'
        ,
        '&.Mui-disabled': 
            backgroundColor: '#293357',
            color: '#666979'
        
    ));