相关疑难解决方法(0)

如果有人熟悉css和Material UI,我们将不胜感激.基本上我正在尝试实现一个Material UI Drawer组件,它在打开时不会滑过页面内容的顶部,而是页面内容符合抽屉,即挤压或展开.我在我的项目中使用bootstrap行和容器,但我不知道如何使用它们来实现这一点.这是我的组件的布局方式:

<div>
    <AppBar
    onLeftIconButtonTouchTap={this.handleToggle}
      title="Imaginary Company"
    />
    <Row>
      <QuotesList />
    </Row>
    <Drawer
    containerStyle={{ top: 64, width:150 }}
    open={this.state.open}
    >
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  </div>

请注意,"顶部"属性只是因为我希望应用栏的顶部标题区域在抽屉打开或关闭时保持可见.一如既往,任何帮助都会令人惊叹!干杯

更新:我找到了一种适合我的hacky解决方案.使用令人敬畏的'样式组件'库(允许样式根据您传入的动态道具进行更改)我能够创建一个包装器组件,它接受一个'折叠'道具,向右滑动的动画等于抽屉的宽度(150).如果有人偶然发现这个并且他们对这里感兴趣的是样式组件中的代码(那里还有一些复制和粘贴的引导容器样式):

const CollapsibleContainer = styled.div`
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
$:after {
content: "";
display: table;
clear: both;
}
position: absolute;
right: 0;
left: ${props => props.collapsed ? '150px' : '0'}!important;
transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
`; 

也许这不是完美的解决方案,但它看起来很好.希望这有助于某人:)