material-ui - 在 Material UI 中如何将设置的宽度导航设置为粘性？

Question

Material UI 的新手我正在尝试创建一个div具有设定宽度的粘性，类似于 Material UInav在其文档右侧的一侧。由于某种原因，我无法div坚持下去。根据研究和文档，我已经阅读了几个问题，这是我的尝试：

尝试 1

我尝试使用Box，但它与页面一起滚动：

import React from 'react'
import { Hidden, Box, List,ListItem } from '@material-ui/core/'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  box: {
    background: 'red',
    position: 'sticky',
    top: 70,
    bottom: 20,
    paddingTop: 100,
    marginTop: theme.spacing(2),
    width: 300,
  },
  sub: {
    display: 'block',
    overflow: 'auto',
  },
}))

const SideToc = ({ nav }) => {
  const { box, sub } = useStyles()
  return (
    <>
      <Hidden smDown>
        <Box className={box}>
          Contents
          <List className={sub} component="nav" aria-label="main mailbox folders">
            <ListItem button>Monday</ListItem>
            <ListItem button>Tuesday</ListItem>
            <ListItem button>Wednesday</ListItem>
          </List>
        </Box>
      </Hidden>
    </>
  )
}

export default SideToc

尝试 2

经过研究，我发现了一些提及，Drawer但是当我部署下面的组件时，我的绿色drawerPaper固定在左侧，而我的蓝色Drawer在右侧是正确的宽度。

import React from 'react'
import Drawer from '@material-ui/core/Drawer'
import Hidden from '@material-ui/core/Hidden'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import { makeStyles } from '@material-ui/core/styles'

const SideToc = ({ nav }) => {
  const useStyles = makeStyles(theme => ({
    toolbar: theme.mixins.toolbar, // necessary for content to be below app bar
    drawer: {
      background: 'blue',
      width: 300,
      flexShrink: 0,
    },
    drawerPaper: {
      marginTop: 120,
      background: 'green',
    },
  }))

  const { toolbar, drawer, drawerPaper } = useStyles()
  return (
    <>
      <div className={toolbar} />
      <Hidden smDown>
        <nav className={drawer} aria-label="mailbox folders">
          <Drawer
            classes={{
              paper: drawerPaper,
            }}
            variant="permanent"
          >
            Contents
            <List component="nav" aria-label="main mailbox folders">
              <ListItem button>Monday</ListItem>
              <ListItem button>Tuesday</ListItem>
              <ListItem button>Wednesday</ListItem>
            </List>
          </Drawer>
        </nav>
      </Hidden>
    </>
  )
}

export default SideToc

这是我的父组件，其内容具有设置的宽度nav：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'

// Components
import SideToc from './SideToc'

const useStyles = makeStyles(theme => ({
  toolbar: theme.mixins.toolbar, // necessary for content to be below app bar
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    overflow: 'hidden',
    background: 'orange',
  },
}))

const Parent = ({ nav, children }) => {
  const { content, toolbar } = useStyles()

  return (
    <>
      <main className={content}>
        <div className={toolbar} />
        {children}
      </main>
      <SideToc className={toolbar} nav={nav} />
    </>
  )
}

export default Parent

研究

• 如何使 Material UI 网格元素具有粘性？
• Reactjs Material-ui 隐藏 appBar 粘滞或静态
• 制作一个 React Material-UI 组件以粘在屏幕的右下角
• 具有动态高度的 React Material-Ui 粘性表格标题

在 Material UI 中，如果我想要一个div不会滚动且具有固定宽度的粘性的，应该怎么做？我的问题是因为我的父母吗？我应该Grid在这种方法中使用材料吗？

---

编辑

经过进一步测试后，我能够让一侧nav粘住，但如果在视口之外，内容将不允许滚动。父组件已被修改为仅div围绕SideToc组件：

<>
<main className={content}>
  <div className={toolbar} />
  {children}
</main>

<div>
  <SideToc toc={toc} />
</div>
</>

SideToc 组件：

import React from 'react'
import { Hidden, Box, List, ListItem } from '@material-ui/core/'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  box: {
    marginTop: theme.spacing(8),
    top: theme.spacing(8),
    width: 250,
    position: 'sticky',
    right: 0,
    overflowY: 'auto',
    flexShrink: 0,
  },
}))

const SideToc = ({ nav }) => {
  const { box } = useStyles()

  return (
    <>
      <Hidden smDown>
        <Box className={box} component="nav">
        Contents
          <List component="nav">
            <ListItem button>Monday</ListItem>
            <ListItem button>Tuesday</ListItem>
            <ListItem button>Wednesday</ListItem>
          </List>
        </Box>
      </Hidden>
    </>
  )
}

export default SideToc

根据请求：

标签： material-uimaterial-design