css не отображается в приложении «Реакция», пока не перекомпилируется

Question

Я включу свой код ниже, но он основан на документации Material-ui и Algolia SearchBox .По отдельности они оба работают нормально, но по сути мое приложение пытается объединить функцию поиска Algolia со встроенной функцией панели поиска AppBar Material-ui, которая фактически технически работает (функционально), за исключением того, что ни один из CSS не относится к самому полю ввода поиска.кажется, работает.

Кто-нибудь может понять, почему мой код может не сработать на CSS?

Как это выглядит сейчас:

Как это должно выглядеть в соответствии с документами Material-Ui, и как это выглядело до того, как я начал пытаться смешать их:

Еще одна вещь, на которую, я думаю, стоит обратить внимание, это то, что когда я делаю изменения на странице, и она перекомпилируется (я говорю о любом изменении,не только CSS), я вижу второе изображение на экране, но как только я перезагружаюсь, оно возвращается к первому изображению.Я знаю, что в этом поведении должно быть значение, но не намного больше.Кроме того, ни одно из поведений при расширении панели поиска не наблюдается.

Кроме того, почему бы и нет, полностью функциональный репозиторий с включенными ключами API, только npm install и npm run dev связанный

//components/AppBar.js
import React from 'react';
import PropTypes from 'prop-types';
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} from '@material-ui/core/styles/colorManipulator';
import {withStyles} from "@material-ui/core/styles";
import SearchIcon from '@material-ui/icons/Search';
import { connectSearchBox } from 'react-instantsearch-dom';

const styles = theme => ({
    root:{
        width: '100%',
    },
    grow:{
        flexGrow: 1,
    },
    menuButton:{
        marginLeft: -12,
        marginRight: 20,
    },
    title:{
        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.unit,
            width: 'auto',
        },
    },
    searchIcon:{
        width: theme.spacing.unit * 9,
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputRoot:{
        color: 'inherit',
        width: '100%',
    },
    inputInput:{
        paddingTop: theme.spacing.unit,
        paddingRight: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
        paddingLeft: theme.spacing.unit * 10,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('sm')]:{
            width: 120,
            '&:focus':{
                width: 200,
            },
        },
    },
});

function SearchBox({currentRefinement, refine}, props){
    const classes = props;
    return(
        <InputBase
            type='search'
            value={currentRefinement}
            onChange={event => refine(event.currentTarget.value)}
            placeholder="Search for Destination by Name, State, and keywords..."
            classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
            }}
        />
    );
}


const CustomSearchBox = connectSearchBox(SearchBox);

function SearchAppBar(props){
    const {classes} = props;
    return(
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <Typography className={classes.title} variant="h6" color='inherit' noWrap>
                        Title
                    </Typography>
                    <div className={classes.grow}/>
                    <div className={classes.search}>
                        <div className={classes.searchIcon}>
                            <SearchIcon/>
                        </div>
                        <CustomSearchBox/>
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    );
}

SearchAppBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SearchAppBar);

Если вам интересно, почему CSS не совсем соответствует документации Material-UI для CSS AppBar, это потому, что способ, с помощью которого Material-UI выполняет свою стилизацию, с помощью makeStyles ()нарушает интеграцию с Algolia, функция SearchBox любит использовать свой параметр props и прерывается, когда этого не происходит.