Question

我正在使用React和Material-UI设置一个小型Webapp，但我不知道如何使我的抽屉组件适合我的应用栏。通过使用react开发人员工具，我可以在控制台中看到我的组件正在拾取className，但是无论我做什么，我的样式都不会应用到它们。当前，抽屉正在剪辑屏幕顶部的应用程序栏，占据了页面的整个高度，而不是放在应用程序栏的下方。为了使“ Sidebar”组件适合我的“ Navbar”组件，我需要更改什么？之所以将这两个组件创建为单独的组件，原因之一是因为我计划以后再为它们添加更多功能。谢谢。

我一直在关注https://material-ui.com/components/drawers/上的“位于应用栏下方”组件演示，并且我还引用了Material UI Drawer won't move under Appbar

这是我的代码段

我的主应用

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

const useStyles = makeStyles(theme => ({
  App: {
    display: 'flex',
  },
  navbar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: 240,
    flexShrink: 0,
  },
  toolbar: theme.mixins.toolbar,
}));

function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <CssBaseline/>
      <Navbar position="fixed" className={classes.navbar}></Navbar>
      <Sidebar className={classes.drawer}></Sidebar>
    </div>
  );
}

export default App;

我的导航栏组件

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

function Navbar() {
    return (
        <AppBar positon="static">
            <Toolbar>
                <h2>Earthquake Mapper</h2>
            </Toolbar>
        </AppBar>
    );
}

export default Navbar;

我的侧边栏组件

import React from 'react';
import Drawer from '@material-ui/core/Drawer';

function Sidebar() {

    return (
        <Drawer variant="permanent">
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

Answer 1

首先，将AppBar的位置设置为“固定”。

Material-UI解决此问题的方法是在工具栏上添加一个高度相等的空div（您将其作为第一个子元素放置在AppBar组件内，因此标题的最小高度等于工具栏的高度）作为抽屉组件的第一个孩子。

默认情况下，此高度为64像素，但是您应该从theme.mixins.toolbar获取此值。您可以在this教程中看到这一点。

所以您最终会做这样的事情：

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

const useStyles = makeStyles(theme => ({
    toolbar: theme.mixins.toolbar,
}));

function Sidebar() {
    const classes = useStyles();

    return (
        <Drawer variant="permanent">
            <div className={classes.toolbar} />
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

查看themes，以获取有关如何使用主题提供程序和自定义的更多信息主题配置。

Answer 2

另一种方法是在抽屉中放置一个空的 <Toolbar /> 以填充空间。

import React from 'react';
import Drawer from '@material-ui/core/Drawer';
import Toolbar from '@material-ui/core/Toolbar';

function Sidebar() {

    return (
        <Drawer variant="permanent">
            <Toolbar />
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

您如何设置一个组件在另一个组件下的样式？

2 个答案: