如何解决使用 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 举报,一经查实,本站将立刻删除。