Material UI永久侧边栏遮挡导航栏且样式不生效问题求助

各位大佬好，我遇到个Material UI的问题折腾半天没解决，来求支招！

我设置的Drawer组件完全不遵守指定的样式规则：一方面它的宽度不是我设定的17rem，另一方面还超出了父组件的边界；更头疼的是它还把顶部的AppBar给挡住了，我特意给AppBar加了zIndex属性，似乎也没起作用。

下面是我项目里相关的代码片段：

const styles = {
  background: {
    display: 'flex',
    //flexDirection: 'row',
    height: '100vh',
    width: '100vw',
    backgroundColor: '#303030',
  },
  drawer: {
    width: '17rem',
  },
  toolbar: {
    justifyContent: 'space-between',
  },
  titles: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
  },
  btn: {
    color: 'inherit',
    outline: 'none',
    fontWeight: 500,
  },
}

function App() {
  return (
    <>
      <AppBar style={{ position: 'relative', zIndex: '1201' }}>
        <Toolbar style={styles.toolbar}>
          <div style={styles.titles}>
            <Typography variant='h5'>
              Naughty pie
            </Typography>
            {/* 此处省略部分内容 */}
          </div>
        </Toolbar>
      </AppBar>
      {/* Drawer组件的代码应该在这里，原提问中未完全展示 */}
    </>
  )
}

有没有大佬能帮我看看这是哪里出问题啦？

备注：内容来源于stack exchange，提问作者pauk