你如何设置一个组件在另一个组件下的样式？答案

【问题标题】：How do you style a component to be under another component?你如何设置一个组件在另一个组件下的样式？
【发布时间】：2019-10-18 15:37:43
【问题描述】：

我正在使用 React 和 Material-UI 设置一个小型 web 应用程序，但我不知道如何使我的抽屉组件适合我的应用程序栏。使用 react 开发人员工具，我可以在控制台中看到我的组件正在获取类名，但无论我做什么，我的样式都没有应用于它们。目前，抽屉正在通过屏幕顶部的应用栏进行剪辑，占据页面的整个高度，而不是适合应用栏下方。为了使我的“侧边栏”组件适合我的“导航栏”组件，我需要更改哪些内容？我将这两个创建为单独的组件的原因之一是因为我计划稍后为它们添加更多功能。谢谢。

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

这是我的代码的 sn-p

我的主应用

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;

【问题讨论】：

你有什么错误吗？
没有错误，控制台中没有弹出任何内容。我可以在反应开发者工具控制台中看到我的三个组件也被分配了正确的类名。

标签： reactjs material-ui

【解决方案1】：

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

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

这个高度默认是64px，但是你应该从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 了解有关如何使用主题提供程序和自定义的更多信息主题配置。

【讨论】：

感谢您的建议，我进行了建议的编辑，但没有任何更改。是否需要通过 props 从 App 组件向 Sidebar 组件传递一些东西？

【解决方案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;

【讨论】：