使用 Twilio 主标题相对定位 Material UI Drawer 组件

问题描述

我创建了一个使用 Material UI 的 Drawer 组件的 react 自定义组件。我需要在两种不同的情况下以不同的方式放置这个抽屉。

案例 1 - Poistion:top:67px 如果有一个类为“project-switcher-modal”的“Twilio-ModalPopupWithEntryControl”组件

案例 2 - Poistion:top:45px，如果没有类为“project-switcher-modal”的“Twilio-ModalPopupWithEntryControl”组件。

下面是我的代码 -

class Agentscorecardplugin extends FlexPlugin 
  flex.MainHeader.Content.add(
    <AgentscoreCardLink key='agent-metrics-view' flexcontext={this.Flex} />,{
         sortOrder: 3,align: "end",}
)

class AgentscoreCardLink extends React.Component
    render() {
        return  (
            <AgentscoreCardDrawer/>            
        )
    }
    

const styles = {
    modalDrawer : {
        top : "67px"
    },noModalDrawer : {
        top : "45px"
    },paper:{
        top: "45px"
    }
};

class AgentscoreCardDrawer extends React.Component {
    state = {
        .....
        popup:false
    };

    render() {
        const { classes,...... } = this.props;
        
        return (
            <div>
                <IconButton ......... />
                <Drawer  classes={{paper : paper }} clas anchor="right" open={this.state.right} onClose={this.toggleDrawer('right',false)}>
                    <IconButton onClick={this.toggleDrawer('right',false)} icon="Close" style={{ alignSelf: 'flex-start' }}/>
                    <div tabIndex={0} role="button" onKeyDown={this.toggleDrawer('right',false)}>
                        .........
                    </div>
                </Drawer>
            </div>
        );
    }
}

我尝试导入 jquery，在 body 元素中查找类 '"project-switcher-modal' 的存在并相应地设置 css/classnames，但似乎不起作用。

我也尝试将元素相对于另一个定位，但这似乎也不起作用。

任何人都可以对此有所了解。

注意：我无法从 Material UI 转移到任何其他框架。

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）