Как стилизовать компонент, чтобы он находился под другим компонентом? - PullRequest
Новая
       1

Как стилизовать компонент, чтобы он находился под другим компонентом?

1 голос
/ 03 июня 2019

Я настраиваю небольшое веб-приложение, используя React и Material-UI, и я не могу понять, как настроить компонент ящика под моей панелью приложения.Используя инструменты разработчика реакции, я вижу в консоли, что мои компоненты выбирают classNames, но независимо от того, что я делаю, мои стили не применяются к ним.В настоящее время ящик просматривает панель приложения в верхней части экрана, занимая всю высоту страницы, а не помещается под панель приложения.Что мне нужно изменить, чтобы мой компонент «Боковая панель» помещался под мой компонент «Навбар»?Одна из причин, по которой я создал эти два компонента как отдельные, заключается в том, что я планирую добавить к ним больше функциональности позже.Спасибо.

Я следил за демонстрацией компонента "обрезано под панелью приложения" на https://material -ui.com / components / drawers / , и я также ссылался на Ящик пользовательского интерфейса для материала не перемещается под панелью приложений

Вот фрагмент моего кода

Мое основное приложение 

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;

Компонент My Sidebar 

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;

1 Ответ

0 голосов
/ 03 июня 2019

Сначала установите позицию AppBar как «фиксированную».

Способ, которым Material-UI решает эту проблему, заключается в добавлении пустого div с равной высотой на панель инструментов (которую вы помещаете в качестве первого дочернего элемента внутриКомпонент AppBar, поэтому минимальная высота вашего заголовка равна высоте панели инструментов) в качестве первого дочернего элемента компонента Drawer.

По умолчанию эта высота составляет 64 пикселя, но вы должны получить это значение из theme.mixins.toolbar.Вы можете увидеть это в действии в этом учебном пособии.

Так что в итоге вы сделаете что-то вроде этого: 

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;

Извлеките темы для получения дополнительной информации о том, как использовать поставщиков тем и настраиваемую конфигурацию темы.

...