如何停止 MUI 的快速拨号以关闭工具提示单击并更改背景颜色

Question

我正在尝试将 MUI（版本 5）的快速拨号作为过滤器来实现，但我遇到了一些问题。这是我所拥有的图像：

我的问题是：

1. 当我点击“过道”时，它按预期工作，但是当我点击“无”或“类别”时，快速拨号关闭。更改单选按钮时如何保持打开状态？
2. 如何更改工具提示的背景颜色？默认情况下它是深灰色，但我想要

   backgrounColor: 'none'

   。我尝试使用 TooltipClasses，但它不起作用，我不想使用 makeStyles()，因为它已被弃用。

这是我的代码：

const [openSpeedDial, setOpenSpeedDial] = useState(false);
const handleSpeedDialOpen = () => setOpenSpeedDial(true);
const handleSpeedDialClose = () => setOpenSpeedDial(false);
const actions = [
        { icon: <IconComponent iconName={'filter'} style={{ fontSize: '20px' }} />, name: 'Label filter', operation: 'label' },
        { icon: <IconComponent iconName={'bug'} style={{ fontSize: '20px' }} />, name: 'Robot filter', operation: 'robot' },
];

<SpeedDial
    ariaLabel="Map configurations"
    FabProps={{ size: 'small' }}
    icon={<IconComponent iconName={'settings'} style={{ fontSize: '20px' }} />}
    direction="left"
    open={openSpeedDial}
    onOpen={handleSpeedDialOpen}
    onClose={handleSpeedDialClose}

>
    {actions.map((action) => {
        return (
            <SpeedDialAction
                key={action.name}
                icon={action.icon}
                tooltipTitle={customTooltip(action)}
                tooltipPlacement='bottom'
                TooltipClasses={{ tooltip: { backgroundColor: 'red' } }} // This doesn't work
            />
        )
    })}
</SpeedDial>

const customTooltip = (action) => {
    const name = `${action.operation}-filter`
    let value = null
    let onChange = null
    let options = []
    if (action.operation === 'label') {
        value = visualizationMode
        onChange = handleLabelChange
        options = <>
            <FormControlLabel value="ds_basic" control={<Radio size='small' />} label="None" />
            <FormControlLabel value="ds_aisle" control={<Radio size='small' />} label="Aisles" />
            <FormControlLabel value="ds_category" control={<Radio size='small' />} label="Cateogries" />
        </>
    } else if (action.operation === 'robot') {
        value = robotSession
        onChange = handleRobotChange
        options = storeMap?.sessions.map((session) => {
            return (
                <FormControlLabel value={session?.session} key={session?.robotIndex} control={<Radio size='small' />} label={`Robot ${session?.robotIndex}`} />
            )
        })
    }
    return (
        <Paper sx={{ padding: 1 }}>
            <FormControl>
                <RadioGroup
                    aria-labelledby={name}
                    name={name}
                    value={value}
                    onChange={onChange}
                >
                    {options}
                </RadioGroup>
            </FormControl>
        </Paper>
    )
}

我也试过将单选按钮组件与快速拨号分开，但我无法进行交互，特别是当鼠标不在快速拨号或单选按钮上时关闭快速拨号和单选按钮，并且当鼠标在单选按钮上时保持快速拨号打开。

我知道这不是快速拨号的预期用途，但这正是我的过滤器所需要的。

任何帮助将不胜感激！