how to customise react material menu behaviour

Question

I have a settings button on click of which it should show a menu anchored right to the settings button as shown

since react material menu will do the same job I used menu like below

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

Problem

• cannot slide smoothly as when I click the slider menu will act as a button
• How to disable the menus button behaviour

Code sandbox demo

Answer 1

As the docs said, you can disable ripple effect

Please add disableRipple property at your StyledMenu and StyledMenuItem

Check the example here.