Как выровнять элементы в панели приложения Material-Ui? - PullRequest
Новая
       4

Как выровнять элементы в панели приложения Material-Ui?

0 голосов
/ 07 января 2020

Я просто пытаюсь выровнять элементы в моей навигационной панели примерно так (но отключаю «Купить в App Store» для поля поиска):

enter image description here

В настоящее время я получаю «вдохновение» от этого компонента материала-интерфейса: https://material-ui.com/components/app-bar/#SearchAppBar. js

По какой-то причине я получаю все свои предметы сгруппированы влево вместо какого-то разумного выравнивания:

enter image description here

Как мне выровнять вещи правильно? Это то, что мой компонент может наследовать? На самом деле нет родительских компонентов, они импортируются непосредственно в приложение. js.

Мой код: 

import React from 'react';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import InputBase from '@material-ui/core/InputBase';
import { fade, makeStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import { Link } from 'react-router-dom';
import SignedInLinks from './SignedInLinks';
import SignedOutLinks from './SignedOutLinks';

const useStyles = makeStyles(theme => ({
    link: {
        color: 'white',
        textDecoration: 'none'
    },
    root: {
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
        display: 'none',
        [theme.breakpoints.up('sm')]: {
            display: 'block',
        },
    },
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
        },
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing(1),
            width: 'auto',
        },
    },
    searchIcon: {
        width: theme.spacing(7),
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputRoot: {
        color: 'inherit',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 7),
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: 120,
            '&:focus': {
                width: 200,
            },
        },
    },
}));


const Navbar = (props) => {
    const classes = useStyles();
    const links = loggedIn ? <SignedInLinks profile={profile} /> : <SignedOutLinks />;
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <Link to='/' className={classes.link}>
                        <Typography className={classes.title} variant="h6" noWrap>
                            MyApp
                        </Typography>
                    </Link>
                    {links}
                    <div className={classes.search}>
                        <div className={classes.searchIcon}>
                            <SearchIcon />
                        </div>
                        <InputBase
                            placeholder="Search…"
                            classes={{
                                root: classes.inputRoot,
                                input: classes.inputInput,
                            }}
                            inputProps={{ 'aria-label': 'search' }}
                        />
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    )
}

edit:

Удаление {ссылки} в ответ на комментарий, но я все еще получаю ту же проблему:

enter image description here

edit2:

Кажется, удаление элементов <Link> позволяет моему окну поиска go в нужном месте. Знаем ли мы почему? Моя проблема в том, что мне нужен мой элемент для направления пользователя на домашнюю страницу, если он нажимает на заголовок

1 Ответ

0 голосов
/ 08 января 2020

Что я хотел бы сделать, это добавить div контейнер следующим образом: 

<div class="container">
  <div class="logo">
  </div>
  <div class="search">
  </div>
</div>

.container {
  display: flex;
  align-items: space-between
}
...