0

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

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

案例 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 转移到任何其他框架。

提前致谢。

4

0 回答 0