如何自定义反应材质菜单行为

Question

我有一个设置按钮，点击它应该显示一个锚定在设置按钮右侧的菜单，如图所示

因为反应材料 menu 会做同样的工作，我使用如下菜单

<StyledMenu
            id="customized-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}>

        <StyledMenuItem>
            <div style={{ width: '70%', fontSize: '14px', padding: '5px' }}>
                <div>
                    <img src={props.icon} alt='' style={{ width: '18px', height: '18px', }}></img>
                    Brigthness
                </div>
                <div><Slider value={value ? value : 30} onChange={handleChange} aria-labelledby="continuous-slider" /></div>
            </div>
            <div style={{ width: '30%', padding: '5px' }}>
                <div>Reset</div>
                <div><input style={{width:'20px',height:'20px'}} text="om" /></div>
            </div>
        </StyledMenuItem>

 </StyledMenu>

问题

• 无法平滑滑动，因为当我单击滑块菜单时，它会充当按钮
• 如何禁用菜单按钮行为

Code sandbox demo

Answer 1

正如 docs 所说，您可以禁用涟漪效应

请在您的 disableRipple 和 StyledMenu 处添加 StyledMenuItem 属性

检查示例 here。