Se alguém estiver familiarizado com CSS e Material UI, qualquer ajuda com isso seria muito apreciada. Basicamente, estou tentando implementar um componente Material UI Drawer (Gaveta da interface do usuário) que, quando aberto, não desliza apenas sobre o topo do conteúdo da página, mas o conteúdo da página está em torno da gaveta, ou seja, aperta ou expande. Estou usando linhas de inicialização e contêineres no meu projeto, mas não tenho idéia de como os usaria para conseguir isso. Veja como meu componente é organizado:

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

Observe que a propriedade 'top' é apenas porque quero que a área de título superior da App Bar permaneça visível com a gaveta aberta ou fechada. Como sempre, qualquer ajuda seria incrível! Felicidades

ATUALIZAÇÃO: Encontrei um tipo de solução hacky que está funcionando para mim. Usando a biblioteca impressionante de 'componentes estilizados' (que permite que os estilos mudem com base em adereços dinâmicos que você passa), eu pude criar um componente de wrapper que aceita um adereço 'recolhido', com uma animação deslizando para a direita igual à gaveta largura (150). Se alguém se deparar com isso e estiver interessado, aqui está o meu código em componentes estilizados (também existem alguns estilos de contêiner de bootstrap copiados e colados):

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

Talvez essa não seja a solução perfeita, mas esteja bem. Espero que isso ajude alguém talvez :)